2

HTML5 プロジェクト用のイメージ プリローダーを作成していますが、問題が発生しました。ゲームで使用される画像は、次のように JavaScript 内の画像オブジェクトで定義されます。

images = new Array();
images[0] = new Image();
images[0].src = '/images/tiles/grass.png';

"document.ready" が実行されるとすぐに、以下に示すプリローダー関数が実行されます。

function preLoader(){
    while(loaded != images.length){
        var loaded = 0;
        for(var loadTest = 0; loadTest < images.length; loadTest++){
            if(images[loadTest].complete){
                loaded ++;
            }
        }
        console.log(loaded);
    }
    console.log("loaded all");
}

問題は、images[loadTest].complete が常に false を返すため、ループが終了しないことです。画像が反抗的に読み込まれたときに、ページが読み込まれてから数秒後に関数を実行することをテストしましたが、問題なく動作しました。

このため、while ループの実行によって画像の読み込みが停止していると想定しています。それが本当なら、どうすればこの問題を解決できますか?

4

4 に答える 4

2

onloadイベントの代わりに、setTimeoutまたはsetInterval呼び出しを介して、イメージをロードしたり、ポーリングを実行したりできます。これにより、コードが非ブロッキング方式で実行されます。

setInterval('checkimages()', 1000)
于 2010-07-29T05:39:20.813 に答える
1

コードにエラーがあります。

  • 大きな問題は、ループでポーリングを実行していることです。これは、Javascriptでは実行しないでください。Javascriptはページと同じスレッドで実行されるため、Javascriptでの処理は、読み込みやユーザーの操作など、ページ内の他のものをブロックします。また、CPUの制御を放棄する間に、なんらかの遅延なしにポーリングを実行することも一般的に悪い考えです。

    ポーリングは、ループではなくsetInterval（）またはsetTimeout（）を使用して実行する必要があります。

  • もう1つの問題は、ループ中に、loadedループが実行されるたびに1つ以上の画像が読み込まれるたびに変数がインクリメントされるため、すべての画像が読み込まれたときではなく、少なくとも1つの画像が読み込まれたときloadedに到達する可能性があります。images.length

于 2010-07-29T05:58:06.223 に答える
1

渡されたハンドラーは.ready()、DOM が構築された後、画像などのアセットが受信される前に実行されることが保証されています。

.load()代わりにハンドラーを使用することもできます。

$(window).load(function () {
  // run code when the page is fully loaded including graphics.
});

これは、jQuery を使用していることを前提としています。

于 2010-07-29T05:31:02.033 に答える
0

Image.onload イベントを使用できます。私はJavascriptがあまり得意ではありませんが、次のようなものがうまくいくはずで、タイマーの使用を避けます:

var loadCounter = 0;

function imageLoaded() {
    loadCounter++;
    if(loadCounter == images.length) {
        console.log("images loaded");
    }
}

images = new Array();
images[0] = new Image();
images[0].onload = imageLoaded;
images[0].src = '/images/tiles/grass.png';

基本的に、画像が読み込まれるたびにカウンターをインクリメントします。すべての画像が読み込まれたら、出力をログに記録します。

于 2010-12-03T17:06:03.170 に答える