Что такое Intersection Observer

Ответ

Intersection Observer — это API, позволяющий асинхронно отслеживать пересечение элемента с его родителем или viewport. Он эффективен для ленивой загрузки, бесконечного скролла или анимаций при появлении элемента.

Пример использования:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target); // Отключаем наблюдение после появления
    }
  });
}, { threshold: 0.1 }); // Срабатывает при 10% видимости

document.querySelectorAll('.lazy-load').forEach(el => observer.observe(el));

Плюсы:

Высокая производительность (не использует scroll/listener)
Гибкость (настройка root, threshold, rootMargin)
Поддержка во всех современных браузерах