Intersection Observer API: примеры использования

[funca]

document.querySelectorAll('div').forEach(div => observer.observe(div))

Насколько наблюдение затратно по ресурсам? Мне интересно, влияет-ли количество наблюдаемых элементов на отзывчивость страницы (что если их не 4, а 4000 или 40000). Есть-ли отличия между десктопными и мобильными браузерами. Были-ли у вас такие кейсы на практике?

[php7]

Кто-то сталкивался, что рисунки иногда не хотят подгружаться?
Пришлось увеличивать margin.

[montanaqw]

Примеры и код на github не грузятся.

[AGrinko]

Выглядит интересно, спасибо!

Вопрос: как обстоят дела с поддержкой разными браузерами? (пошёл гуглить сам, но это стоило бы упомянуть в статье)

[OpenEducationOfficial]

У нас был неприятный баг на мобиле — страница через 10-15 минут работы начинала подлагивать. Долго искали, оказалось в компоненте на React забыли вызывать observer.disconnect() при размонтировании.

Проблема в том что observer продолжает висеть и слушать даже после того как компонент уже уничтожен — и так копится с каждым переходом по страницам. На десктопе незаметно, на мобиле через какое-то время начинает ощущаться.

Лечится просто:

useEffect(() => {
  const observer = new IntersectionObserver(callback)
  observer.observe(ref.current)
  return () => observer.disconnect()
}, [])

disconnect() убирает всё сразу, unobserve(element) — по одному.
В статье примеры хорошие но это место стоило бы добавить