Я пытаюсь реализовать отложенную загрузку, настроив наблюдателя на элемент <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 Тенер для события прокрутки, поскольку это будет означать переопределение.
Есть ли какое-либо прямое решение для этого случая?