如何在加载多个图像的最后一个图像时调用函数？

Question

我想在所有特定图像集都已加载后调用一个函数。目前我只是对最后一张图片使用 .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();        
    };

Answer 1

您可以为每个图像添加一个 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;

Answer 2

如果您知道需要显示多少张图片，您可以采用这种方法：

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

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

document.querySelectorAll('#gallery img').forEach(function() {
    this.onclick = imageOnLoad;
});

如何在加载多个图像的最后一个图像时调用函数？

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

html

javascript

html5-canvas