使用 html5 和 jQuery 预加载音频 + gif答案

【问题标题】：Preloading audio + gif with html5 and jQuery使用 html5 和 jQuery 预加载音频 + gif
【发布时间】：2012-05-16 00:03:28
【问题描述】：

我正在开发一个启动页面，该页面会自动启动与 gif 相关的 wav 文件。我想做的是显示一个加载轮，直到 wav 文件和 gif 都完全加载，以便它们同步播放。我宁愿使用 swf，但客户端没有原始项目文件，所以我被卡在使用加载非常缓慢的蹩脚 gif，并且只有在页面完全加载后才会开始播放 wav 文件。我需要他们两个同时玩。有什么建议么？

【问题讨论】：

够有趣的！它几乎是一个两部分的问题。首先，您需要检测两者何时都加载，但棘手的部分（不知道评论者的太多细节）是检测 gif FPS 是否与音频帧速率匹配。如果是这样，它所需要的只是将它们正确匹配。
谢谢，显然你可以在 Photoshop 中提取帧，感谢上帝。

标签： jquery html

【解决方案1】：

一种方法是使用XMLHttpRequest 和data uri 来加载gif 和音频文件。在两者上跟踪 onreadystatechange 事件。当两者都完成后，您可以将httpRequest.responseText 直接设置为它们的src 属性。例如下面的代码可以在 html 加载完成后执行..

var imageData = "";
var audioData = "";

function onHtmlLoad()
{
    // Show loading wheel..        

    var isImageLoaded = false;
    var isAudioLoaded = false;    

    var imageRequest = new XMLHttpRequest();  
    request.open('GET', 'http://www.website.com/path/to/image.gif', true);

    imageRequest.onreadystatechange = function(e) {  

        if(imageRequest.readyState == 4)
        {
            if(imageRequest.status == 200)
            {
                isImageLoaded = true;
                imageData = imageRequest.responseText; // data uri..
                if(isAudioLoaded)
                    loadSplashScreen();
            }
        }
    }

    imageRequest.send();

    var audioRequest = new XMLHttpRequest();  
    request.open('GET', 'http://www.website.com/path/to/audio.wav', true);

    audioRequest.onreadystatechange = function(e) {  

        if(audioRequest.readyState == 4)
        {
            if(audioRequest.status == 200)
            {
                isAudioLoaded = true;
                audioData = audioRequest.responseText; // data uri..
                if(isImageLoaded )
                    loadSplashScreen();
            }
        }
    }

    audioRequest.send();
}

function loadSplashScreen()
{
    var imgEl = document.getElementById("myImgElement");
    var audioEl = document.getElementById("myAudioElement");

    // loads immediately..
    imgEl.src = imageData;
    audioEl.src = audioData;

    // Hide loading wheel..
}

但也要注意data uri 的大小，您将在src 属性中设置check this。希望这会有所帮助..

【讨论】：