Как использовать Intersection Observer для lazy loading?

Middle
199 просмотров
AFK Offer AI

const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { loadImage(e.target); observer.unobserve(e.target); } }); }, { rootMargin: "200px" }). rootMargin: "200px" — начинай загрузку за 200px до viewport. threshold: 0 — триггер при первом пикселе. Для React: кастомный хук useIntersectionObserver с ref. Или react-intersection-observer библиотека. Также для: infinite scroll, анимации при скролле, lazy render тяжёлых компонентов.

Следующий вопрос

Что такое BEM и зачем?