在開始動畫之前預加載所有聲音和圖像

Question

我正在構建一個涉及聲音和圖像的簡單動畫網絡應用程序。 我想要它，以便當用戶進入網站時，他們會看到“正在加載”頁面，當所有圖像和音頻文件都完成加載時，它會調用一個啟動動畫的功能。 到目前為止，我的代碼大致如下：

var img1, img2;
var sound1, sound2;

function loadImages() {
    img1=new Image();
    img1.src="...";
    img2=new Image();
    img2.src="...";
    img1.onload=img2.onload=handleImageLoad;
}

function loadSound() {
    createjs.Sound.registerSound({id:"sound1", src:"sound1.wav"});
    createjs.Sound.registerSound({id:"sound2", src:"sound2.wav"}); 
    createjs.Sound.addEventListener("fileload", handleSoundLoad);
}

function handleImageLoad(e) {
    //Do something when an image loads
}

function handleSoundLoad(e) {
    //Do something when a sound loads
    if(e.id=="sound1") sound1 = createjs.Sound.createInstance("sound1");
    else if(e.id=="sound2") sound2 = createjs.Sound.createInstance("sound2");
}

$(document).ready(function() {
    //overlay a "now loading" .gif on my canvas
    ...
    ...

    loadSound(); 
    loadImages();
}

// call this when everything loads
function start() {
    //remove "now loading..." overlay .gif
    ...
    ...

    //start animating
}

handleImageLoad()和handleSoundLoad()是相互獨立調用的，因此我不能在調用start()依賴它們。 如何確定何時加載所有內容？ 我可以用什么回調函數來實現這個目的？

Answer 1

使用內置的SoundJS registerSound方法也不錯，但PreloadJS將在單個隊列中處理聲音和圖像（以及其他類型）。 查看PreloadJS GitHub中的示例。

http://preloadjs.com和http://github.com/CreateJS/PreloadJS/

Answer 2

這可能不是最好的解決方案，但我做了類似的事情：

var lSnd = false;
var lImg = false;

$(document).ready(function(){
 setInterval(checkLoadComplete,1000);
});

function loadSound(){
  //loadingSound
  //on load complete call= soundLoadingComplite();
}

function soundLoadingComplite(){
  //do some stuff
  lSnd = true;
}
function loadImages(){
  //loadingImages
  //on load complete call= imageLoadingComplite();
}

function imageLoadingComplite(){
  //do some stuff
  lSnd = true;
}

function checkLoadComplete(){
  if(lSnd&&lImg){
    startAnimation();
    //clear interval
 }
}

希望這可以幫助。

Answer 3

我會這樣做：

function loadSound(){
    songOK = false;

    song = new Audio()
    song.src = uri;
    song.addEventListener('canplaythrough', function(){ songOK = true; }, false)

    return songOK;
}

function loadImage(){
    pictOK = false;
    pict = new Image();
    pict.src = uri;

    pict.onload = function (){
        pictOK = true;
    }
    return pictOK;
}

function loadMedia(){
    startNowLoading();

    if( loadSound() && loadImage())
        stopNowLoading();
    else
        kaboom();   //something went wrong!        
}

$(document).ready(function(){
    loadMedia();
}

這應該允許您按順序執行這些功能。