IntersectionObserver

IntersectionObserver сообщает, когда target пересекает пороги видимости относительно root. Заменяет scroll polling для lazy images, бесконечных списков, impression-аналитики и prefetch. Задайте root, rootMargin, thresholds и cleanup; callbacks — асинхронные наблюдения, не таймер анимации.

					const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) loadImage(entry.target);
    }
  },
  { rootMargin: '200px 0px', threshold: 0.01 }
);
				

rootMargin грузит до видимых пикселей; thresholds задают долю пересечения. unobserve по завершении, чтобы не течь на долгоживущих SPA.

На интервью: почему дешевле scroll listeners и как rootMargin сдвигает preload.

Типовые ошибки: не точные часы анимации; забытый unobserve течёт на длинных экранах.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

• Осознанно root, margin, thresholds.
• unobserve/disconnect при размонтировании.
• Не ждите покадровой точности.
• loading="lazy", если хватает нативного.