Ленивая загрузка через IntersectionObserver

Подгрузка изображений и бесконечная прокрутка без обработчиков scroll.

// Ленивые изображения: <img data-src="/media/photo.jpg" alt="">
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    const img = entry.target;
    img.src = img.dataset.src;
    img.classList.add('loaded');
    observer.unobserve(img);
  });
}, { rootMargin: '200px 0px', threshold: 0.01 });

document.querySelectorAll('img[data-src]').forEach((img) => imageObserver.observe(img));

// Бесконечная прокрутка: наблюдаем за «сторожевым» элементом внизу списка
let page = 1;
const sentinel = document.querySelector('#sentinel');
const pageObserver = new IntersectionObserver(async ([entry]) => {
  if (!entry.isIntersecting) return;
  const html = await fetch(`/items/?page=${++page}`).then((r) => r.text());
  sentinel.insertAdjacentHTML('beforebegin', html);
});
if (sentinel) pageObserver.observe(sentinel);