Wie finde ich die Anzahl der 'vollständigen' Bilder?

Question

Ich würde gerne die Anzahl der Bilder innerhalb eines bestimmten Elements (div) finden, die die Eigenschaft 'complete' haben (wie im Browser geladen hat sie).

Ich stolpere jetzt seit über einer Stunde und mein Gehirn ist komplett gebraten. Einige Hilfe würde sehr geschätzt werden.

Dank

Answer 1

Ihre unmittelbare Frage zu beantworten, Bilder mit der complete Immobilie zu finden, könnten Sie verwenden:

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); 
    } 
} 

Nachdem dieser Code ausgeführt wird, completeImages ist ein Array von <img> Elemente, die haben complete Eigenschaft als true.

Mit jQuery, könnten Sie verwenden:

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

In diesem Fall ist images, ein jQuery-Objekt (Array-artiges Objekt) von <img> Elemente, die die complete Eigenschaft als true haben.

Statt die complete Eigenschaft Überprüfung, eine weitere Option ist es, die load Ereignis zu verwenden, um festzustellen, wenn sie für sie spezielle Daten laden und setzen:

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

und herausfinden, welche/wie viele sind geladen:

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

Beachten Sie, dass das load Ereignis wird nicht vollständig unterstützt/zuverlässig mit <img> s: http://api.jquery.com/load-event/ - nach unten scrollen, um den „Caveats des Ladeereignisses, wenn sie mit imag verwendet es "Abschnitt.

Answer 2

Sie können auch das gleiche Verhalten mithilfe von Klassen neu -

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

Nun, wenn Sie sehen möchten, wie viele Bilder geladen wurden, können Sie ihn nur Selektor -

$("img.complete").length