Отложенная загрузка Div

170

25 ноября 2018, 21:40

Подскажите, пожалуйста, как реализовать отложенную загрузку элементов при прокрутке страницы. К примеру есть

<div id="container">
   <div class="item">Item_1</div>
   <div class="item">Item_2</div>
   <div class="item">Item_3</div>
   <div class="item">Item_4</div>
   ...
   ...
   <div class="item">Item_101</div>
</div>

Как сделать, чтобы, например, при загрузке странице загружались 10 элементов, и далее по 10 по мере прокрутке.

Как реализовать пагинацию в моем случае я не знаю. Подскажите как можно автоматически подгружать по 10 контейнеров, возможно есть несложное решение. Спасибо!

Answer 1

Вот примерный код реализации: (Тут код для функции elementInViewport)

let template = [
  '<div class="item">Item_1</div>',
  '<div class="item">Item_2</div>',
  '<div class="item">Item_3</div>',
  '<div class="item">Item_4</div>',
  ...
  '<div class="item">Item_101</div>'
]
function appendItems() {
  for (var i = 0; i < 10; i++) {
    $('.container').append(template[i]);
  }
  template = template.splice(10, 101)
}
appendItems()
$(window).scroll(function() {
  const $last = $('.container .item').last()
  elementInViewport($last) ? appendItems() : true
})

Что тут происходит:

Задается массив с элементами, которые нужно добавить
Выводятся первые 10
Если последний элемент находится внутри видимой области экрана, выводится еще 10 и т.д.

Держи ссылку