「完全な」画像の数はどのようにして確認できますか？

Question

私は、特定の要素（div）の中に（ブラウザがそれらをロードし終えると）プロパティ 'complete'を持つ画像の数を探したいと思います。

私はこれを1時間以上悩まされていました。私の脳は完全に揚げられています。いくつかの助けが大いに感謝していますcompleteImagesが持っている<img>要素の配列で、このコードが実行された後

var container = document.getElementById("div_id"), 
    images = container.getElementsByTagName("img"), 
    completeImages = [], 
    j = images.length, 
    i, cur; 
for (i = 0; i < j; i++) { 
    cur = images[i]; 
    if (cur.complete) { 
     completeImages.push(cur); 
    } 
} 

：

おかげ

Answer 1

は、あなたがこれを使用することができ、completeプロパティで画像を見つけるためにあなたの即時の質問に答えるために、 completeプロパティはtrueです。 jQueryを使って

、あなたが使用できます。

この場合

var images = $("#div_id").find("img").filter(function() { 
    return $(this).prop("complete"); 
    // or 
    return this.complete; 
}); 

、imagesを、trueとしてcomplete性質を持っている<img>要素のjQueryオブジェクト（配列のようなオブジェクト）です。

代わりcompleteプロパティを確認する、別のオプションは、彼らは彼らのために特別なデータをロードし、設定したときに検出するloadイベントを使用することです：

$("#div_id").on("load", "img", function() { 
    $(this).data("image-complete", true); 
}); 

と何がロードされる/アウト見つける：

<img> sの信頼性 loadイベントは完全にサポートされていないことを

$("#div_id").find("img").filter(function() { 
    return $(this).data("image-complete"); 
}); 

注/：http://api.jquery.com/load-event/ - loadイベントの「警告までスクロールIMAGで使用した場合es "セクションを参照してください。

Answer 2

また、クラスを使用して同じ動作を再作成することができ -

$("img").load(function(){ 
    $(this).addClass('complete'); 
}); 

今、あなたはあなただけのこのセレクタを使用することができますロードされているどのように多くの画像を見たい時はいつでも -

$("img.complete").length