複数の画像を読み込むときのコールバックのクロスブラウザソリューションですか？

Question

は、私は他の質問を確認し、それらはすべて一つの特定のイメージがロードされたときにコールバックを行うためにどのような情報を持っていた：

var img = new Image(); 
img.src = "images/img.png"; 
if (!img.complete) { 
    img.onload = function() { 
     // code to be executed when the image loads 
    } 
} 

またはすべての画像が「もし」ステートメントで読み込まれているかどうかを確認するための簡単なチェックを。また、$（window）.load（またはonLoadなど）は動作しません。

私は2枚の画像をロードしています私の場合は

：

var img1 = new Image(); 
var img2 = new Image(); 
img1.src = 'images/img1.png'; 
img2.src = 'images/img2.png'; 

は、どのように私は最初の例のものと同様のコールバックを定義することができますが、両方のイメージのロードが終了したとき、起動されますか？

ありがとうございます。

Answer 1

は、複数の画像を作成し、それらがすべてロードされたときにコールバックを呼び出します機能です。

function createImages(srcs, fn) { 
    var imgs = [], img; 
    var remaining = srcs.length; 
    for (var i = 0; i < srcs.length; i++) { 
     img = new Image(); 
     imgs.push(img); 
     img.onload = function() { 
      --remaining; 
      if (remaining == 0) { 
       fn(srcs); 
      } 
     }; 
     img.src = srcs[i]; 
    } 
    return(imgs); 
} 

var imgs = createImages(['images/img1.png', 'images/img2.png'], myCallback); 

P.S.画像の場合は.onloadを使用しているときは.onloadハンドラを設定してから.srcの値を設定する必要があります。画像がキャッシュ内にある場合は.src値を設定するとonloadハンドラが直ちに起動する可能性があります。最初にonloadハンドラを設定していない場合は、ハンドラを設定する時点でイメージが既にロードされているため、絶対に起動しないことがあります。これは、一部のブラウザで発生します。 onloadイベントが必要な場合は、.onloadを.srcの前に設定してください。

Answer 2

これは参照カウントと呼ばれます。これは、n個のタスクが完了した後に単一のコールバックを実行するための標準的な手法です。ここで

var count = 2; 
img1.onload = function() { 
    count-- === 0 && callback(); 
} 
img2.onload = function() { 
    count-- === 0 && callback(); 
} 

function callback() { 

}