Senior Frontend - javascript, html, css(@seniorFront). Intersection Observer Это браузерный API, который позволяет асинхронно отслеживать пересечение эле

Intersection Observer Это браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента. Пример Для наглядности область наблюдения выделена жёлтой рамкой, а снизу показано как изображения прокручиваются к этой области. Видно, что изображения начинают загружаться при пересечении пунктира, то есть чуть раньше, чем они появляются в видимой области. Это возможно благодаря свойству rootMargin. Ещё одна фишка — изображение Морти немного увеличивается, когда полностью оказывается в наблюдаемой области. Такой трюк делается с помощью свойств threshold и intersectionRatio, о которых будет рассказано ниже. Упрощённый код для этого примера выглядит приблизительно так.

 const lazyImages = document.querySelectorAll('.lazy-image')

 const callback = (entries, observer) => {
   entries.forEach((entry) => {
     if (entry.isIntersecting) {
       console.log('Пользователь почти докрутил до картинки!')

       entry.target.src = entry.target.dataset.src
       observer.unobserve(entry.target)
     }
   })
 }

 const options = {
   // root: по умолчанию window, но можно задать любой элемент-контейнер
   rootMargin: '0px 0px 75px 0px',
   threshold: 0,
 }

 const observer = new IntersectionObserver(callback, options)

 lazyImages.forEach((image) => observer.observe(image))

👉 @seniorFront