将所有图像加载到一个类中

Question

我正在加载52个共享同一类的图像，当将加载的图像打印到控制台时，每次刷新时输出的图像量都会更改。

理想的输出将是加载类中的每个图像，因为我试图使用进度条跟踪进度，然后显示图像库。

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

这将输出以下内容，显示随机加载的图像数量。

Answer 1

可能是由于浏览器缓存。 您可以尝试检查每个图像的.complete属性，如果已经完成，则立即运行代码。

$(".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);
}