5

すべての画像がロードされているかどうかをテストする私の試みは次のとおりです。

for (var i = 0; i < imgCount; i ++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src='img'+i+'.png'
    imgArr[i].onload = function() {
        loadArr[i] = true //but wait! At the end of
                          //the loop, i is imgCount
                          //so this doesn't work.
    }
}

問題は、ループが完了すると、変数iがimgCount. つまり、他のすべての「ロード済み」フラグはtrue、イメージがロードされたときに設定されません。

「読み込まれた」プロパティを画像に追加する方法はありますか、またはこの問題の回避策はありますか?

4

3 に答える 3

7

クロージャーを使用して onload 関数を定義する必要があります。

for (var i = 0; i < imgCount; i ++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src='img'+i+'.png'
    imgArr[i].onload = (function(i){
        return function(){ loadArr[i] = true }
    })(i);
}

これは、同様のシナリオでこれが機能することを示すjsFiddleです。

また、回答として現在選択しているソリューションは実際には機能しないことに注意してください。

imgArr[i].onload = (function() {
        loadArr[i] = true;
    })();

この関数はすぐに評価されます。これは、ループ内で、loadArr の各要素が onload イベントと同様に true に設定されることを意味します。そのコードは、機能的には次のものと同じです。

imgArr[i].onload = loadArr[i] = true;
于 2013-03-23T13:37:10.850 に答える
1

次のように、無名関数にインデックス値を渡す必要があります。

for (var i = 0; i < imgCount; i++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src = 'img' + i + '.png'
    imgArr[i].onload = function (index) {
        return function () {
            loadArr[index] = true //but wait! At the end of
            //the loop, i is imgCount
            //so this doesn't work.
        };
    }(i);
}
于 2013-03-23T13:40:23.737 に答える
-1

これが閉鎖が行われた理由です！ループはほぼ瞬時に実行され、最初の画像が読み込まれるずっと前に終了します。したがって、 i==imgCount すぐに、他のすべての値を「スキップ」します。クロージャーはこれを回避し、 i の各値に個別の画像に影響を与えることができます。

ただし、あなたの場合、実際に各画像に「ロード済み」属性を追加します。

// Construct your image array
for (var i = 0; i < imgCount; i++) {
    imgArr[i] = new Image();
    imgArr[i].src='img'+i+'.png';
}

//Then iterate over the array, adding a 'loaded' attribute when it occurs
imgArr.each(function(){
    $(this).onload(function() {
        $(this).attr('loaded','true');
    });
}
于 2013-03-23T13:43:34.690 に答える