如何延遲加載畫布元素

Question

比方說，我有100個畫布元素，每個元素都包含由javascript操作的內容。這會導致頁面掛起，直到全部100個元素都加載完畢。你將如何去懶惰加載畫布元素？

Answer 1

您可以使用間隔一次添加一個畫布。通過這種方式，瀏覽器可以有時間在畫布添加之間進行繪製，並且不會凍結瀏覽器。簡單的例子：

var index = 0, 
    interval; 

var drawCanvas = function() { 
    // draw canvas here 
}; 

interval = window.setInterval(function() { 

    if (index < 100) { 
     drawCanvas(); 
     index += 1; 
    } else { 
     window.clearInterval(interval); 
    } 

}, 25);