Come trovo il numero di immagini 'complete'?

Question

Mi piacerebbe trovare il numero di immagini all'interno di un elemento specifico (div) che ha la proprietà 'completa' (come nel browser ha completato il caricamento di esse).

Sono inciampato in questo per più di un'ora e il mio cervello è completamente fritto. Qualche aiuto sarebbe molto apprezzato.

Grazie

Answer 1

per rispondere alla tua domanda immediata di trovare le immagini con la proprietà complete, è possibile utilizzare questo:

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

Dopo questo codice viene eseguito, completeImages è un array di <img> elementi che hanno la complete proprietà come true.

Con jQuery, si può utilizzare:

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

In questo caso, images, è un oggetto jQuery (array come oggetto) di <img> elementi che hanno la proprietà complete come true.

Invece di controllare la proprietà complete, un'altra opzione è quella di utilizzare l'evento load per rilevare quando caricano e impostare dati speciali per loro:

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

e per scoprire quali/quante sono caricati:

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

Nota che l'evento load non è completamente supportato/affidabile con <img> s: http://api.jquery.com/load-event/ - scorrere verso il basso per le "Avvertenze della manifestazione carico quando utilizzato con imag es. "

Answer 2

Si potrebbe anche ricreare lo stesso comportamento utilizzando le classi -

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

Ora ogni volta che si vuole vedere quante immagini sono state caricate si può semplicemente utilizzare questo selettore -

$("img.complete").length