Jak znaleźć liczbę "kompletnych" obrazów?

Question

Chciałbym znaleźć liczbę obrazów w określonym elemencie (div), które mają właściwość "ukończone" (tak jak w przeglądarce zakończyło się ładowanie ich).

Pogrążam się w tym od ponad godziny, a mój mózg jest całkowicie smażony. Pewna pomoc byłaby bardzo doceniana.

Dzięki

Answer 1

Aby odpowiedzieć na natychmiastowe pytanie znaleźć obrazy z właściwością complete, można użyć to:

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

Po uruchomieniu tego kodu, completeImages jest tablicą <img> elementów, które mają complete Właściwość jako true.

z jQuery, można użyć:

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

W tym przypadku images, jest obiektem jQuery (array-like object) z <img> elementów, które mają właściwość complete jako true.

Zamiast sprawdzania własności complete, innym rozwiązaniem jest użycie zdarzenia load wykryć kiedy załadować i ustawić specjalne dane dla nich:

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

i dowiedzieć się, które/ile są ładowane:

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

Uwaga że zdarzenie load nie jest w pełni obsługiwana/wiarygodne z <img> s: http://api.jquery.com/load-event/ - Przewiń w dół do „Ostrzeżenia w przypadku obciążenia w przypadku korzystania z imag es ".

Answer 2

Można również odtworzyć ten sam problem przy użyciu klas -

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

Teraz, gdy chcesz zobaczyć, ile zdjęć zostało załadowane można po prostu użyć tego selektor -

$("img.complete").length