Question

我有一些javascript动态添加元素到我的页面。问题是在任何给定的运行中都要创建数百个元素，虽然加载单个元素只需不到一秒钟，整个页面可能需要30秒或更长时间才能完全加载，然后一切都突然涌现到页。我的问题是：如何更新页面，以便我的动态创建的元素一旦创建就会显示出来？

       var newDiv = document.createElement('div');

       for (var val in array) {
            var newCanvas = document.createElement('div');
            newCanvas.className = "graph";
            newDiv.appendChild(newCanvas);

            drawGraph(val, newCanvas);  //adds a bunch of elements to newCanvas
            addTitle(val, newCanvas);          //adds another
            addDescription(val, newCanvas);    //adds another
       }

       document.body.appendChild(newDiv);

Answer 1

一次一个地动态地向DOM添加数百个元素是非常低效的。每次向DOM添加单个可见元素时，都会强制重排整个DOM树，然后重新绘制到屏幕上。

您应该使用JavaScript来创建可以追加新DOM元素的DOM片段（例如div元素）。一旦你拥有了所有的新元素，你可以通过将该片段的子元素转移到实时DOM树中包含的DOM元素来批量添加它们。

以下是使用一组指定属性和可选子元素创建DOM元素的函数示例。将元素及其子元素分配给变量myDiv后，该元素将附加到文档的主体。

function dom(tag, attributes) {
    var el, key, children, child;
    el = document.createElement(tag);
    for (key in attributes) {
        if (attributes.hasOwnProperty(key)) {
            el[key] = attributes[key];
        }
    }
    for (i = 2, l = arguments.length; i < l; i++) {
        child = arguments[i];
        if (child.nodeType == 1 || child.nodeType == 3) {
            el.appendChild(child);
        }
    }
    return el;
}

var myDiv = dom(
    'div',
    { id: 'myDiv', className: 'container' },
    dom(
        'p',
        { className: 'firstParagraph' },
        document.createTextNode('If you enjoy this movie, '),
        dom(
            'a',
            { href: 'http://www.amazon.com', title: 'Buy this movie at Amazon.com!' },
            document.createTextNode('buy it at Amazon.com')
        ),
        document.createTextNode('!')
    ),
    dom(
        'p',
        {},
        document.createTextNode('The quick brown fox jumps over the lazy dog.')
    )
);

document.body.appendChild(myDiv);

Answer 2

在构造DOM之后放置所有元素加载。

即使用

$(document).ready(function(){
     // induvidual elements loadings
});

$符号表示Jquery。要使用jquery，请添加脚本块。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

这样，基本结构将完全加载，各个部分可能会占用自己的时间。

动态添加元素时刷新html

2 个答案: