加载带有 onload 的图像数组，如何限制将它们绘制到画布

Loading array of images with onload, how do I throttle drawing them to canvas?

本文关键字：绘制 何限制 onload 图像 数组 加载      更新时间：2023-09-26
限制

大量图像加载函数的最佳方法是什么？代码示例：

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

我试图防止当这 500 张图像大约同时返回时同时发生所有绘图。我试过将加载包装在 setTimeout 中，但我不想限制图像的下载，只是在绘制它们时。 谢谢。

像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。我希望你明白这个想法。

相关文章：