如何在加载最后一张图片时调用函数?

How can I call a function when the last image of several images loads?

本文关键字：一张 调用 函数 加载 最后      更新时间：2023-09-26

我想在加载所有特定图像集时调用一个函数。目前，我只是使用。onload的最后一个图像，它的工作99%的时间，但有时有问题。做这件事最好的办法是什么?我意识到我可以为每个图像创建一个。onload，然后检查函数内部是否所有其他图像都已加载，但我觉得必须有一个更有效的方法。

下面是我的代码: 
P1LCImage.src = "images/" + P1LC + "-card.png";
P1RCImage.src = "images/" + P1RC + "-card.png";
P2LCImage.src = "images/" + P2LC + "-card.png";
P2RCImage.src = "images/" + P2RC + "-card.png";
P3LCImage.src = "images/" + P3LC + "-card.png";
P3RCImage.src = "images/" + P3RC + "-card.png";
P4LCImage.src = "images/" + P4LC + "-card.png";
P4RCImage.src = "images/" + P4RC + "-card.png";
P5LCImage.src = "images/" + P5LC + "-card.png";
P5RCImage.src = "images/" + P5RC + "-card.png";
P6LCImage.src = "images/" + P6LC + "-card.png";
P6RCImage.src = "images/" + P6RC + "-card.png";
blankCardImage.src = "images/blank-card.png";
protectedCardImage.src = "images/protected-card.png";
voteCount1.src = "images/voteCount1.png";
voteCount2.src = "images/voteCount2.png";
voteCount3.src = "images/voteCount3.png";
voteCount4.src = "images/voteCount4.png";
voteCount5.src = "images/voteCount5.png";
voteCount6.src = "images/voteCount6.png";
voteCount6.onload = function () {
    drawTable();        
    };

您可以为每个图像添加一个onload，并让它们每个增加一个计数器。当计数器达到图像数量时，所有图像都已加载，并且调用drawTable()

示例代码:

var numImgs = 6;
var numLoaded = 0;
function imgLoaded() {
if(++numLoaded === numImgs)
  drawTable();        
};
voteCount1.onload = imgLoaded;
voteCount2.onload = imgLoaded;
voteCount3.onload = imgLoaded;
voteCount4.onload = imgLoaded;
voteCount5.onload = imgLoaded;
voteCount6.onload = imgLoaded;

如果您知道需要显示多少张图片，您可以遵循以下方法:

var counter = 0;
var TOTAL_IMAGES = 20;
function imageOnLoad() {
    if (++counter >= TOTAL_IMAGES) {
        drawTable();
    }
}

当然，TOTAL_IMAGES可以是可变的，在这种情况下，您可以使用数组长度或类似的东西。我会将事件附加到DOM类上，因此您不需要在每个图像上指定onload事件。例如，让我们假设图片被包装在id为gallery的div中。在本例中，您可以这样做:

document.querySelectorAll('#gallery img').forEach(function() {
    this.onclick = imageOnLoad;
});
相关文章：