javascript - 加载类中的所有图像

Question

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

所需的输出是加载类(class)中的每个图像，因为我正在尝试使用进度条跟踪进度然后显示图像库。

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