Улучшение реализации отложенной загрузки на основе IntersectionObserver - PullRequest
2 голосов
/ 17 февраля 2020

Я пытаюсь реализовать отложенную загрузку, настроив наблюдателя на элемент <footer>, который фактически находится внизу страницы.

Я установил следующие параметры для IntersectionObserver инициализированный экземпляр:

  let intersectionOptions = {
    root: null,
    rootMargin: '150px',
    threshold: 0.15
  }

  const footer = document.querySelector('footer');
  const observer = new IntersectionObserver(callback, intersectionOptions);

Где обратный вызов выглядит следующим образом:

 const callback = async (entries = [], observer) => {
    const [entry] = entries;
    let { isIntersecting, time } = entry;
    time = time/1000;
    const timeDelta = time - intersectionTimeStart;
    const worthTime = timeDelta > 0.5;
    const worthToTrigger = isIntersecting && worthTime;
    intersectionTimeStart = time;
    if (worthToTrigger) {
      options.observer = observer;
      options.element = entry.target;
      // lazy loading side effect
      await intersectionCallback(options);
    }
  }

Общий HTML выглядит следующим образом:

<CardList>
 <CardRow />
 <CardRow />
 <CardRow />
 <CardRow />
</CardList>
<Footer /> 

Это реализовано logi c прекрасно работает, когда пользователь медленно прокручивает вниз, а нижний колонтитул пересекается с окном просмотра, способ получения нового CardRow, который затем выводится в CardList и помещается внизу.

Однако есть главная проблема, если пользователь будет быстро прокручивать страницу вниз, будет перемещаться только одна страница, что делает необходимым прокручивать вверх и вниз снова, чтобы получить новую страницу, что, безусловно, фанк.

Я мог бы удалить worthTime немного логики c однако, он все равно должен был бы иметь возможность получить страницу только один раз, если пользователь не попытается снова прокрутить вниз.

Я определенно не хочу представить событие LIS Тенер для события прокрутки, поскольку это будет означать переопределение.

Есть ли какое-либо прямое решение для этого случая?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...