使用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設置。 希望您能明白。