обновить html при динамическом добавлении элементов

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 (например, элемента 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); 

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> 

Таким образом, базовая структура будет полностью загружаться, а отдельные части могут занять свое время.