Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2018, 15:20
Кандидат Javascript-наук
Отправить личное сообщение для yaparoff Посмотреть профиль Найти все сообщения от yaparoff
 
Регистрация: 26.04.2016
Сообщений: 106

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

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


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


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

Последний раз редактировалось yaparoff, 11.12.2018 в 15:25.
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2018, 15:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Проверять нужно позицию не того, что сверху, а последнего элемента в списке.
Ответить с цитированием
  #3 (permalink)  
Старый 11.12.2018, 17:19
Кандидат Javascript-наук
Отправить личное сообщение для yaparoff Посмотреть профиль Найти все сообщения от yaparoff
 
Регистрация: 26.04.2016
Сообщений: 106

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

Сравниваю позицию последнего элемента с его же позицией + body.scrollTop
Но они равны получаются всегда.
Не то сравниваю?
if (lastTableRow.getBoundingClientRect().top <=
          lastTableRow.getBoundingClientRect().top + document.body.scrollTop) {
             (... выполняем подгрузку)
}


https://codepen.io/anon/pen/xmGbwO
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2018, 17:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от yaparoff
Сравниваю позицию последнего элемента с его же позицией + body.scrollTop
А что вы хотели, имелось ввиду, если нижнее появилось в окне, то надо добавить, а не сверять позицию со своей же.

В сети же полно описаний технологий отложенной загрузки, почитайте.
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2018, 18:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ленивая загрузка
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прилипающий sidebar дрожит при прокрутке carder Элементы интерфейса 1 24.10.2016 17:19
Фиксирование и открепление вертикальной навигационной панели при прокрутке vettel jQuery 1 07.05.2015 18:39
Исчезаение блока при прокрутке страницы gogogo Общие вопросы Javascript 3 28.12.2014 16:45
Фиксация div'a вверху страницы при прокрутке razorg1991 Элементы интерфейса 2 30.08.2013 22:13
Как при прокрутке страницы оставлять элемент на месте? FRIE jQuery 1 02.08.2012 20:54