0

サウンドと画像を含む単純なアニメーション Web アプリを構築しています。ユーザーがサイトに入ると「読み込み中」ページが表示され、すべての画像と音声ファイルの読み込みが完了すると、アニメーションを開始する関数が呼び出されるようにします。これまでのところ、私が持っているコードはおおよそ次のとおりです。

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()。すべてがいつロードされるかを知るにはどうすればよいですか? これを実現するために使用できるコールバック関数は何ですか?

4

3 に答える 3

0

私はこのようにしています：

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();
}

これにより、関数を順番に実行できるようになります。

于 2013-10-15T03:20:21.367 に答える