刷新html，同時動態添加元素

我有一點javascript可以動態地向我的頁面添加元素。問題是在任何給定的運行中都有數百個元素需要創建，儘管加載單個元素需要不到一秒的時間，但整個頁面可能需要30秒或更多時間才能完全加載，然後突然間所有內容都會彈出頁。我的問題是：如何更新頁面，以便我的動態創建的元素一旦創建就會顯示出來？刷新html，同時動態添加元素

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

來源

2012-06-22 user1429419

請將郵政編碼 – matt3141

將您的JavaScript放置在文件底部？ –

我們可以看到一些代碼嗎？聽起來你並沒有將每個元素單獨添加到dom中，或者直到某個時間才隱藏它。 – fanfavorite

將數百個元素動態添加到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-22 21:31:03 natlee75

發表了一些代碼。你是對的，這減少了10倍的加載時間！但是當頁面需要5秒加載並且一次繪製所有內容時，它仍然看起來很渺茫。有沒有辦法首先繪製主要元素（我將繪製圖形的元素），然後每次繪製一個div而不重繪整個頁面？萬分感謝！ – user1429419

在構建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-22 20:58:31

jQuery從來沒有被mesioned隊友，你可能想告訴他，你的方法需要jQuery ... –

刷新html，同時動態添加元素

回答

相關問題