1

ページに要素を動的に追加するJavaScriptが少しあります。問題は、特定の実行で作成する要素が数百あり、1つの要素を読み込むのに1秒もかからないものの、ページ全体を完全に読み込むのに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要素を追加できる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);
于 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 に答える