Как правильно сделать поэтапный each?

Question

[chelkaz]

Я получаю через Ajax объект, в нем около 1000 списков. В списках ссылки и названия фото.
Я их вывожу сейчас на страницу:

$.each(data, function( index, value ) {
//html = "Шаблон блока";
// Тут просто $("#list_upload_img").append(html)
 });

Они появляются естественно все, что тормозит браузер, как правильно сделать поэтапную подгрузку?
Например по 50 штук с кнопкой (Плюс еще 50) ?
Учитывая то, что объект Json я получаю сразу весь, советы для получения части не нужны. Нужно поэтапно выводить уже полученный объект.
Нужно при скролле догружать. Точнее как правильнее это? Чтобы браузер не вис. Вот я получил объект, в нем 1000 элементов. Этот объект в переменной. И мне нужно по частям добавлять на страницу. Из этих элементов в массиве строятся блоки DIV с изображениями и сразу 1000 построить плохо. Браузер зависает.

Comments

[RoverWhite]

Поэтапно в смысле при скролле догружать или поэтапно в смысле асинхронно рисовать?

[chelkaz]

Все верно, нужно при скролле догружать. Точнее как правильнее это? Чтобы браузер не вис. Вот я получил объект, в нем 1000 элементов. Этот объект в переменной. И мне нужно по частям добавлять на страницу. Из этих элементов в массиве строятся блоки DIV с изображениями и сразу 1000 построить плохо. Браузер зависает.

Answer 1

[Givandos]

В любом случае, 1000 за раз или 50 штук, все равно в вашем случае append должен быть один раз за пределами цикла-перебора.
В цикле же просто собирать все в одну строку конкатенацией либо в массив строк, и в append'е делать join.
Это существенно разгрузит браузер.

Answer 2

[timokins]

Создаешь функцию, которая будет выводить 50 элементов,
с n элемента, по n + 50.

При загрузке страницы вызываешь функцию с аргументом n=0.
По нажатию на кнопку, вызываешь функцию с аргументом n=число уже показанных элементов.

Comments

[chelkaz]

А n уже показанных где хранить лучше?

Answer 3

[GreatRash]

Браузер тупит, потому что вы тыщу раз append вызываете, и ему приходится тыщу раз reflow и repaint делать. Вот так будет правильней, сравните скорость:

var $docFagment = $(document.createDocumentFragment);

$.each(data, function( index, value ) {
  var html = '';

  // ...

  $docFagment.append(html);
});

$('#list_upload_img').append($docFragment);