イメージオブジェクトのロード機能がすぐに起動する

Question

私はいくつかのImageオブジェクトを作成していますが、私がDev Toolsでネットワークを調整すると、イメージが完全にロードされる前にonload関数が呼び出されています。

私は本当に解決策を見つけることができません。私のコード：

function imgObjects(data) { 
    for (var i in data) { 
     img[data[i].id] = new Image(); 
     img[data[i].id].onload = imgReady(); 
     img[data[i].id].name = data[i].name; 
     img[data[i].id].src = data[i].image; 
    } 
} 

function imgReady() { 
    imgReadyCount++; 
    console.log('Count: ', imgReadyCount); 
} 

私はあなたの答えがバニラjs、感謝の中でそれを提供してください知ってしまった！

Answer 1

問題は、イベントハンドラの割り当てです。

img[data[i].id].onload = imgReady();//you call the function here 

代わりに、それはすぐにハンドラを呼び出さないようになり、また、その後、未定義のonloadハンドラに割り当てられているにはなりません

img[data[i].id].onload = imgReady; //note that the handle is stored 

でなければなりません。

Answer 2

イベントをdocumentに追加します。

document.addEventListener("DOMContentLoaded", function(event) { 
    //your code to run since DOM is loaded and ready 
}); 

Answer 3

あなたがそれらをプリロードしているためだ

"Imageオブジェクトのonloadイベント機能は、瞬時に発射します"。 onloadイベントは、孤立している、つまりドキュメントツリーに追加されていないという事実にかかわらず、イメージソースが読み込みを終えるとすぐに起動します。もちろん、「即座に」という言葉は、すでにキャッシュされているという事実に適用されます。現金から引き出されている - 「瞬時に」。

p.s .:あなたがonloadイベントを処理する準備が整うと思うようになるまで、あなたはimg.srcを指定することから自分自身を予約する必要があります。