如何延迟加载画布元素

Question

假设我有100个canvas元素，每个元素都有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);