Comment trouver le nombre d'images 'complètes'?

Question

Je voudrais trouver le nombre d'images dans un élément spécifique (div) qui ont la propriété 'complete' (comme dans le navigateur a terminé de les charger).

Je trébuche depuis plus d'une heure maintenant et mon cerveau est complètement frit. De l'aide serait grandement appréciée.

Merci

Answer 1

Pour répondre à votre question immédiate pour trouver des images avec la propriété complete, vous pouvez utiliser ceci:

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

Une fois ce code est exécuté, completeImages est un tableau de <img> éléments qui ont Propriété complete en tant que true.

Avec jQuery, vous pouvez utiliser:

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

Dans ce cas, images, est un objet jQuery (objet semblable à un tableau) de <img> éléments qui ont la propriété complete comme true.

Au lieu de vérifier la propriété complete, une autre option est d'utiliser l'événement load pour détecter le moment où ils chargent et ensemble de données spéciales pour eux:

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

et pour savoir qui/combien sont chargés:

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

Notez que l'événement load n'est pas entièrement pris en charge/fiable avec <img> s: http://api.jquery.com/load-event/ - faites défiler jusqu'à la « caveat de l'événement de charge lorsqu'il est utilisé avec imag es "section.

Answer 2

Vous pouvez également recréer le même comportement en utilisant des classes -

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

Maintenant, chaque fois que vous voulez voir combien d'images ont été chargées, vous pouvez simplement utiliser ce sélecteur -

$("img.complete").length