加载 class 内的所有图像

Question

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

所需的输出是加载 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);
}

加载 class 内的所有图像

Load all images inside a class

javascript

jquery

image-loading