jQuery：配列内のすべてのイメージがロードされたときを確認する方法は？

Question

私は画像の配列を持っています（画像の正確な数は変わります）。それらがすべてロードされると、実行するコードが必要になります。

私はこれを試してみましたが、それは動作しません：

myImgArray.load(function(){ 
    alert('loaded'); 
}); 

私はおそらく画像は可能性があるため、ループまたは類似した何かのために働くだろうと思うし、しません

33: Uncaught TypeError: Object [object Object],[object Object],[object Object],[object Object] has no method 'load'

を取得無作為の順序でロードします。

Answer 1

私がそれを行うために知っている唯一の方法は、各イメージのロードハンドラを添付し、ロードされたイメージの数を保持することです。あなたの合計に達すると、それらはすべてロードされています。

var urls = [ 
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg", 
    "http://photos.smugmug.com/photos/344292111_SvSfK-Ti.jpg", 
    "http://photos.smugmug.com/photos/344291168_nErcq-Ti.jpg" 
]; 

var imgs = []; 
var cnt = 0; 

for (var i = 0; i < urls.length; i++) { 
    var img = new Image(); 
    img.onload = function() { 
     ++cnt; 
     if (cnt >= urls.length) { 
      // all images loaded here 
     } else { 
      // still more images to load 
     } 
    }; 
    img.src = urls[i]; 
    imgs.push(img); 
} 

あなたがここにアクションでそれを見ることができます：

はここではないことのコードです。このためhttp://jsfiddle.net/jfriend00/7KF7V/

を仕事に.srcプロパティがあるために設定される前に、onloadハンドラ関数を割り当てる必要がありますイメージがブラウザキャッシュにある場合、.onloadが割り当てられる直前にonloadが起動し、イベントが失われることがあります。