javascript - 如何延迟加载画布元素

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);