Javascript-форум - Подгрузка элементов при прокрутке страницы

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Подгрузка элементов при прокрутке страницы (https://javascript.ru/forum/misc/76175-podgruzka-ehlementov-pri-prokrutke-stranicy.html)

Подгрузка элементов при прокрутке страницы

Есть таблица. Когда мы скроллим ее до конца, то должны подгружаться еще элементы.
Подгрузка элементов срабатывает, но потом когда снова надо подгрузить еще элементы, полоса прокрутки просто не успевает за ними, они начинают слишком рано подгружаться (не тогда когда дойдем до конца таблицы)

Наверное дело в следующем алгоритме:
Чтобы понять, подгружать элементы или нет я сделал такой алгоритм:
Есть нижняя точка bottomCoord, из нее мы вычитаем величину прокрутки окна window.pageYOffset.
Если эта разница <= высоте блока '.table__ajax-wrapper', тогда подгружаем еще элементы

https://codepen.io/anon/pen/YdPoMV

P.S.: В данном примере сделал подгрузку без аякса, т.к. не знаю есть ли такой удаленный сервер, где можно расположить php-файл. И потом это в песочнице использовать. Если кто то расскажет как можно пользоваться аяксом в песочнице - буду благодарен.

Цитата:

Сообщение от yaparoff

есть ли такой удаленный сервер, где можно расположить php-файл.

Никто не запрещает делать запросы к своему серверу, главное чтобы он давал разрешения на кроссдоменный запрос для домена форума.

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

Цитата:

Сообщение от laimas (Сообщение 500257)

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

Спасибо. Но все равно что то не получается

Сравниваю позицию последнего элемента с его же позицией + body.scrollTop
Но они равны получаются всегда.
Не то сравниваю?

if (lastTableRow.getBoundingClientRect().top <=
          lastTableRow.getBoundingClientRect().top + document.body.scrollTop) {
             (... выполняем подгрузку)
}

https://codepen.io/anon/pen/xmGbwO

Цитата:

Сообщение от yaparoff

Сравниваю позицию последнего элемента с его же позицией + body.scrollTop

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

В сети же полно описаний технологий отложенной загрузки, почитайте.

ленивая загрузка

yaparoff,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.title {
  font-size: 30px;
  margin-bottom: 70px;
}

.table {
  width: 1000px;
}

.table__ajax-content {
  min-height: 100vh;
}

.table__row {
  height: 40px;
  padding: 0 10px;
}
.table__row:nth-child(odd) {
  background-color: #F3F3F3;
}


body.load:after{
    content: "Загрузка...";
    text-align: center;
    display: block;
}
html *{
    margin: 0;
    padding: 0;
}

  </style>


</head>

<body>
<div class="title">Title</div>
<div class="table">
  <div class="table__ajax-wrapper">
    <div class="table__ajax-content">
      <div class="table__row">1</div>
      <div class="table__row">2</div>
      <div class="table__row">3</div>
      <div class="table__row">4</div>
      <div class="table__row">5</div>
      <div class="table__row">6</div>
      <div class="table__row">7</div>
      <div class="table__row">8</div>
      <div class="table__row">9</div>
      <div class="table__row">10</div>
      <div class="table__row">11</div>
      <div class="table__row">12</div>
      <div class="table__row">13</div>
      <div class="table__row">14</div>
      <div class="table__row">15</div>
    </div>
  </div>
</div>
  <script>
var body = document.querySelector('body');
var lastTableRow = document.querySelector('.table__row:last-child');
var i = 16;
var busy;
function ajaxLoader()
{
   if(busy) return;
   busy = true;
   body.classList.add("load");
   window.setTimeout(onAjaxSuccess, 3000)
}

function onAjaxSuccess() {
  body.classList.remove("load");
  var   tableAjaxContent = "";
  for (var j = 0; j < 2; j++) {
    var tableRow = `<div class="table__row">${i}</div>`;
    tableAjaxContent  += tableRow;
    i++;
  }
  lastTableRow.insertAdjacentHTML("afterEnd", tableAjaxContent);
  lastTableRow = document.querySelector('.table__row:last-child');
  busy = false;
}

function checkAjaxLoading() {
  var bottomCoord = lastTableRow.getBoundingClientRect().bottom;
  var height = document.documentElement.clientHeight;
  if (height >= bottomCoord) {
       ajaxLoader();
    }
}


window.addEventListener('scroll', function() {
  checkAjaxLoading();
});
  </script>
</body>
</html>