Добавить большой кусок HTML с Jquery - PullRequest
Новая
       1

Добавить большой кусок HTML с Jquery

1 голос
/ 30 июня 2010

Я разрабатываю сайт, который использует прогрессивное улучшение, а также имеет мобильную версию.Я хочу использовать jquery для добавления слайд-шоу на рабочий стол сайта и хочу узнать, как лучше всего добавить большое количество HTML.Вот пример того, что я собираюсь добавить: 

<!-- Slideshow -->
<div class="scrollable">
<!-- "previous page" action -->
<a class="prev browse left"></a>   

<!-- root element for the items -->
<ul>
    <li>
        <img src="images/slideshow/image1.jpg" alt="image 1" title="image 1" />
    </li>

    <li>
        <img src="images/slideshow/image2.jpg" alt="image 2" title="image 2" />
    </li>

    <li>
        <img src="images/slideshow/image3.jpg" alt="image 3" title="image 3" />
    </li>

    <li>
        <img src="images/slideshow/image4.jpg" alt="image 4" title="image 4" />
    </li>

    <li>
        <img src="images/slideshow/image5.jpg" alt="image 5" title="image 5" />
    </li>
</ul>

<!-- "next page" action -->
<a class="next browse right"></a>

Буду ли я лучше использовать метод добавления или HTML для чего-то вроде этого.У меня также была другая идея, что я мог бы создать переменную с HTML внутри и использовать JQuery для добавления содержимого, но я попробовал и потерпел неудачу в этом (отсутствие достаточных знаний!).Буду признателен за любой совет.

Ответы [ 3 ]

2 голосов
/ 30 июня 2010

Вы можете делать тесты для любых сравнений, например: 

function test( name, fn, n, next ) {

  var n = n || 100; // default number of runs
  var start, end, elapsed;

  setTimeout(function() { 
    start = Number(new Date());   
    for ( ; n--; ) {
      fn() 
    }
    end = Number(new Date());

    elapsed = end - start;

    // LOG THE RESULT
    // can be: $("#debug").html(name + ": " +  elapsed + " ms");
    console.log(name + ": " +  elapsed + " ms")); 

    next && next();
  }, 0);
}

test("append", function() {
  $("#elem").append( LARGE HTML );
});

test("html", function() {
  $("#elem").html( LARGE HTML );
});

Я бы попробовал создать новый элемент и установить его html в большой кусок, а затем добавить этот элемент в dom. По моему мнению, это будет быстрее, потому что при применении html элемент не виден, поэтому браузер может работать быстрее, и тогда ему нужно добавить только один элемент в DOM.

См. Это в действии. (просмотр клика)

(кажется, что html () быстрее)

1 голос
/ 30 июня 2010

Использование append - это нормально, но я бы хотел использовать его только один раз или как можно меньше, и заранее сконструировать HTML, держа его в строковой переменной.

В общем, очень мало манипуляций с DOM. Вы должны ударить DOM таким образом, только когда это абсолютно необходимо. Давайте рассмотрим следующий пример: 

var $myList = $("#myList");   

for (i=0; i<1000; i++){
    $myList.append("This is list item " + i);
}

Этот код добавляет 1000 строк в список HTML. Это делается с помощью 1000 последовательных вызовов метода .append () и, следовательно, 1000 манипуляций с DOM. Следующий код, модифицированный из приведенного выше примера, демонстрирует, как это можно сделать более эффективным: 

var $myList = $("#myList");
var li = "";   

for (i=0; i<1000; i++){
    li += "<li>This is list item " + i + "</li>";
}  

$myList.append(li);

См. Следующую статью: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-2-dom-manipulation/

0 голосов
/ 30 июня 2010

Я бы использовал родной innerHTML для всего фрагмента, это самый быстрый способ манипулирования DOM.См. Здесь: http://www.quirksmode.org/dom/innerhtml.html

<div id="container"></div>

<script>
var html = '<p>Some HTML</p>';
document.getElementById('container').innerHTML = html;
</script>
...