Question

在创建和插入DOM元素时，似乎用于该任务的函数在元素显示在页面之前返回。

在开始插入元素之前，我将div的display属性设置为'block'，插入元素后我将属性设置为'none'，问题是，指示符没有显示在页面中。有可能实现这一目标吗？其中$是document.getElementById。

的别名

$('loading').className="visible";
var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
    var para = document.createElement('p');
    para.appendChild(document.createTextNode('Paragraph No. ' + i));
    container.appendChild(para);    
    }
$('loading').className="hidden";

它看起来像createElement和/或appendChild异步运行，所以我几乎立即隐藏了指标？

Answer 1

setTimeout（）就是答案。一个简单的“一线”改变：

$('loading').className="visible";
setTimeout(function() {
    var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
        var para = document.createElement('p');
        para.appendChild(document.createTextNode('Paragraph No. ' + i));
        container.appendChild(para);    
    }
    $('loading').className="hidden";
}, 0);

Answer 2

我相信在脚本运行完毕之后DOM才会刷新。

要使其异步运行，您可以尝试将其包装在setTimeout调用中，超时为零毫秒。在伪代码中：

showLoadingIndicator();
setTimeout(addElements, 0);
function addElements() {
    // perform your loop here
    hideLoadingIndicator();
}

Answer 3

你永远不希望在浏览器中花费太长时间。它杀死了UI，包括（不幸的是）用作无限进度指示器的GIF动画。

解决方案是将使用setTimeout（）的50次调用分解为添加1000个元素的函数。

如何在插入大量dom元素时显示“工作”指示符

3 个答案: