加载类中的所有图像

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