使用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屬性設置可以限制，check this。 希望這會有所幫助..