我在页面上有4张图片。我想在加载所有4个图像后触发JS事件。我当然不能确定将加载图像的顺序,因此我无法在最后一张图像上触发事件。一个想法是有一个计数器,但我想不出最好的方法来检查该计数器何时等于4,因为我不喜欢每200ms检查一次setTimeout()的想法。
还有其他想法吗?
我在网站上使用jQuery,所以我认为这可能会有所帮助。
这是图片HTML代码:
<img src="/images/hp_image-1.jpg" width="553" height="180" id="featureImg1" />
<img src="/images/hp_image-2.jpg" width="553" height="180" id="featureImg2" />
<img src="/images/hp_image-3.jpg" width="553" height="180" id="featureImg3" />
<img src="/images/hp_image-4.jpg" width="553" height="180" id="featureImg4" />
答案 0 :(得分:8)
关于Salty's example,最好使用闭包来避免全局变量,如:
$("img").load(function() {
var count = 0, numImages = $("img").size();
return function () {
if (++count === numImages) {
//All images have loaded
}
};
}());
<强> [编辑] 强>
根据jeroen's comment,我用jQuery count === 4
函数替换了硬编码的值4(size
),以便在函数内提供更大的灵活性。
答案 1 :(得分:3)
count=0;
$("img").load(function() {
count++;
if(count==4) { //All images have loaded
//Do something!
}
});