javascript - 如何延迟加载 Canvas 元素

Question

假设我有 100 个 Canvas 元素，每个元素都包含由 javascript 操作的内容。这会导致页面挂起，直到加载完所有 100 个元素。您将如何延迟加载 Canvas 元素？

Answer 1

您可以使用间隔一次添加一个 Canvas 。这样浏览器就可以有时间在 Canvas 添加之间进行绘画，而您不会卡住浏览器。简单示例:

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