javascript - 使用 onload 加载图像数组，如何限制将它们绘制到画布上？

Question

限制大量图像加载功能的最佳方法是什么？代码示例：

while( images.length <= 500 ){
    img.onload = function() {
        drawImage(image,0,0,500,500);
    }
}

当这 500 张图像大约在同一时间返回时，我试图阻止所有绘图同时发生。我已经尝试将 onload 包装在 setTimeout 中，但我不想限制图像的下载，就在它们被绘制时。谢谢。

Answer 1

像javascript canvas方法中的大多数东西一样是同步的。这意味着它在完成工作之前不会继续执行代码。您的图像确实是一张一张地加载的，但是速度太快了，您看不到。drawImage

为了增加图像加载的延迟，我们可以创建某种队列。我们将图像添加到数组中，并在一段时间后执行绘图函数：

img.onload = function() {
    images.push(img);
};
(...)

var i = 0;
var images = [];
var timeoutFn;

(function draw() {
    if (images.length) {
        drawImage(images[0],0,0,500,500);
        images.shift();
    }
    timeoutFn = setTimeout(draw, 1000);
})();

现在，您需要在timeoutFn = null所有图像加载后进行设置。我希望你能明白。