Что приходит вам на ум, когда вы думаете об Intersection Observer?
Это (изображение выше) правильно! Позвольте мне рассказать вам, что на самом деле представляет собой Intersection Observer.
Это API, который позволяет просматривать изменения видимости элемента DOM в области просмотра. Другими словами, он предоставляет способ асинхронного наблюдения за изменениями пересечения целевого элемента с элементом-предком или с окном просмотра документа верхнего уровня.
Допустим, вы хотите отслеживать вход и выход элемента DOM внутри видимого окна просмотра, наблюдатель пересечения — это решение вашей проблемы. Это помогает определить видимость элемента или видимость двух элементов по отношению друг к другу.
Возможно, вы захотите использовать это для ленивой загрузки изображений. Предположим, у вас есть данные о 50 студентах, которые необходимо отобразить на веб-странице. Это будет работать при небольшой длине прокрутки страницы. Теперь представьте веб-страницу с бесконечной прокруткой, которая разочарует пользователя.
Здесь наблюдатель пересечения может решить нашу проблему с ленивой загрузкой. Intersection Observer API позволяет коду регистрировать функцию обратного вызова, которая выполняется всякий раз, когда элемент, который они хотят отслеживать, входит или выходит из другого элемента (или окна просмотра), или когда величина пересечения двух элементов изменяется на запрошенную величину.
