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大小可以限制check this。希望这会有所帮助..

用html5和jQuery预加载音频+ gif

1 个答案: