加载类中的所有图像

当我将每次刷新时输出的图像打印到控制台时，我加载了共享相同类的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); 
});

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

来源

2016-03-08 esd

不知道这是否有帮助，但getElementsByClassName返回一个“活”节点列表。这意味着它实际上并没有在getElementsByClassName调用点查询节点。它每次查询调用返回的节点列表时都会查询。这允许您始终拥有一个节点列表，该节点列表表示与类名称匹配的当前节点，即使在初始调用后添加了新节点。尝试将getElementsByClass名称更改为querySelectorAll（“theClassName”）。 –

可能是由于浏览器缓存。您可以尝试检查每个图像的.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); 
}

来源

2016-03-08 02:41:29

谢谢，我没有想过浏览器缓存。竖起大拇指！ – esd

不客气。 – 2016-03-08 03:10:27

加载类中的所有图像

回答

相关问题