jquery - 使用 html5 和 jQuery 预加载音频 + gif

Question

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

Answer 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属性中设置的大小可能会受到限制，请检查此。希望这可以帮助..