1

我有一些 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);
4

2 回答 2

3

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

您应该使用 JavaScript 创建一个 DOM 片段（例如 div 元素），您可以在其中添加新的 DOM 元素。一旦你拥有了所有的新元素，你可以通过将该片段的子元素转移到活动 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);
于 2012-06-22T21:31:03.080 回答
0

将所有的元素加载在 DOM 构建完成之后。

即使用

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

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

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

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

于 2012-06-22T20:58:31.860 回答