2

私はHTML5Canvasゲームに取り組んでおり、レベルはいくつかの画像（そして最終的にはオーディオファイルなどの他のデータも）をプリロードする必要があります。これらすべての画像を配列またはコンテナオブジェクトに格納することを計画しています。私がする必要があるのは、ゲームを続行する前に、これらの画像がすべて完全にダウンロードされるまで待つ方法を見つけることです。

これは、ページが開いているときには発生しません。これは実行中のスクリプトの奥深くで発生し、画像は動的に読み込まれます。アイデアは「読み込み中」のメッセージを表示することであり、すべてが完了したら、意図したとおりにレベルを開始します。

私はjQueryにアクセスできますが、そのままのJavascriptコードを使い続けたいと思います。window.onload関数は、ページの読み込み時に実際には発生しないため、ここで機能しますか？そのようなイベントが存在しない場合、画像オブジェクトをトラバースして、それらがまだロードされているかどうかを確認する方法はありますか？

4

2 に答える 2

3

すべてのイメージがロードされた（または失敗した）場合に、onloadイベントをチェックインするためのカウンターを持つことができます。
何かのようなもの

var loadedImages = 0;
var failedImages = 0;
var imageCount = amount of images
function loaded(){
    loadedImages++;
    if (loadedImages == imageCount){
        //all images successfully loaded
    }
    else if ((loadedImages+failedImages) == imageCount){
        //all images completed
    }
}
function failed(){
    failedImages++;
    if ((loadedImages+failedImages) == imageCount){
        //all images completed
    }
}
var images = array();
for (var i = 0; i < imageCount; i++){
    images[i].onload = loaded;
    images[i].onerror = failed;
    images[i].src = the image source
}
于 2012-06-12T19:51:16.353 に答える
0

私はこの答えから始めて、それを複数の画像で機能するように変換します。ただし、jqueryを使用します。

于 2012-06-12T19:38:03.397 に答える