Charger toutes les images à l'intérieur d'une classe

Question

Je charge 52 images partageant la même classe, lorsque j'imprime les images chargées sur la console, la quantité d'images qui sortent change chaque fois que je rafraîchis.

La sortie désirée serait de charger chaque image dans la classe, comme je suis en train de suivre la progression avec une barre de progression puis d'afficher la galerie d'images.

var thumbs = document.getElementsByClassName("thumbImg"); 
var thumbTotal = thumbs.length; 
console.log("number of thumbImg's = ", thumbTotal); 

$(".thumbImg").on("load", function() { 
    console.log("the following has loaded = ",this); 
}); 

Ceci affiche les informations suivantes montrant la quantité aléatoire d'images chargées.

Answer 1

peut être dû à la mise en cache du navigateur. Vous pouvez essayer de vérifier la propriété .complete de chaque image et exécuter le code immédiatement s'il est déjà terminé.

$(".thumbImg").each(function(i, el) { 
    if (el.complete) { 
    handler.call(el); 
    } else { 
    $(el).on("load", handler); 
    } 
}) 

function handler() { 
    console.log("the following has loaded = ",this); 
}