Глава 2: API IntersectionObserver
Еще один полезный API из браузера. Прежде чем говорить о «Intersection Observer», вы должны знать, что такое наблюдатель.
Наблюдатель — это объект, который постоянно отслеживает или наблюдает за чем-либо и уведомляет об изменении каких-либо изменений.
Как говорится, мы можем наблюдать и реагировать на любые изменения элемента. API-интерфейсы наблюдателя очень полезны для обнаружения изменений в приложениях. Ниже приведены различные типы API-интерфейсов наблюдателя в JavaScript. Каждый тип наблюдает разные вещи.
1. IntersectionObserver — отслеживает видимость и положение элемента DOM.
2. MutationObserver — наблюдает за деревом DOM. Он ожидает изменений, внесенных в DOM.
3. ResizeObserver — отслеживает изменения размеров содержимого или рамки блока Element или ограничивающего прямоугольника блока SVGElement.
4. PerformanceObserver. Он использовался для отслеживания событий измерения производительности и получения уведомлений о новых записях производительности по мере того, как они записываются на хронологию производительности браузера.
5. ReportingObserver — позволяет собирать и получать доступ к отчетам браузера.
Здесь я собираюсь обсудить API Intersection Observer.
API-интерфейс наблюдателя за пересечением
Intersection Observer API предоставляет способ асинхронного наблюдения за изменениями в пересечении целевого элемента с элементом-предком или с областью просмотра документа верхнего уровня. Это означает, что он позволяет наблюдать за изменениями в пересечении определенного элемента, это может быть «div», «span», «button», «images» и т. д.
Раньше у нас не было прямых API для проверки видимости элемента. Для этого мы использовали JS или другие JS-библиотеки. Реализовать решение этой проблемы было очень сложно.
Где я могу это использовать?
Существует несколько вариантов использования этого Observer.
1. Отложенная загрузка содержимого и изображений, когда дело доходит до области просмотра или прокрутки страницы.
2. Мы можем реализовать бесконечную прокрутку с помощью наблюдателей пересечений.
3. Выполнение анимации при прокрутке страницы.
4. Показ/воспроизведение рекламы в зависимости от активности пользователя.
Давайте познакомимся с некоторыми понятиями
Теперь мы будем использовать интерфейс IntersectionObserver для создания нового наблюдателя.
let options = {
"root" : document.querySelector(‘body'),
"rootMargin": ‘0px’,
"threshold": [0, 0.5, 1] // Array or number
}
let observer = new IntersectionObserver(callback, options);
IntersectionObserverсоздает и возвращает новыйобъект Intersection, когда целевой элемент пересекает указанный корневой элемент.
Обратный вызов — это функция, которая запускается всякий раз, когда порог пересекается в том или ином направлении.
Параметры — содержит конфигурацию наблюдателя.
— корень: элемент, который используется в качестве области просмотра для проверки видимости цели. Должен быть предком цели. По умолчанию используется область просмотра браузера, если она не указана или если null.
— rootMargin : поле вокруг корня. Может иметь значения, аналогичные свойству поля CSS, например. «10px 20px 30px 40px» (сверху, справа, снизу, слева). Значения могут быть процентами
— порог:либо одно число, либо массив чисел, указывающих, при каком проценте видимости цели должен выполняться обратный вызов наблюдателя.
Как настроить таргетинг на элемент?
let target = document.querySelector(‘#targetElement'); observer.observe(target);
** обратный вызов, который мы настроили для наблюдателя, теперь будет выполняться в первый раз
**он ждет, пока мы не назначим цель нашему наблюдателю (даже если цель в данный момент не видна)
Всякий раз, когда цель достигает порога, указанного для IntersectionObserver, вызывается обратный вызов. Обратный вызов получает список объектов IntersectionObserverEntry и наблюдателя:
let callback = (entries, observer) => {
entries.forEach(entry => {
// Each entry describes an intersection change
for one observed
});
};
Давайте запишем в консоль объект IntersectionObserverEntry :
Теперь давайте возьмем один вариант использования. Здесь я возьму Анимацию, которую довольно просто реализовать. После просмотра мы получим больше ясности в том, как использовать Intersection Observer.
Вот пример,
В этом примере мы видим, что цвет фона для div меняется в зависимости от видимости в области просмотраплощадь.
let options = {
“rootMargin”: ‘0px’,
“threshold”: [0, 0.5, 1]
}
// Create a new Observer
let observer = new IntersectionObserver(callback, options);
// Start observing the target element
let target = document.querySelector(‘#target’)
observer.observe(target)
Здесь создается наблюдатель пересечения для наблюдения за элементом div target с пороговым значением [0, 0,5, 1] . Значение threshold также может принимать массивы. На основе этих порогов выполняются обратные вызовы.
Что находится в обратном вызове?
let callback = (entries) => {
if (entries[0].intersectionRatio < 0.5) {
entries[0].target.className = “bg-yellow”;
entries[0].target.innerText = “yellow”;
} else if (entries[0].intersectionRatio >= 0.5 && entries[0].intersectionRatio < 1) {
entries[0].target.className = “bg-red”;
entries[0].target.innerText = “red”;
} else {
entries[0].target.className = “bg-green”;
entries[0].target.innerText = “green”;
}
}
Наблюдатель пересечений уведомляет, когда цель пересекает окно просмотра. При прокрутке вниз на основе пороговых значений вызывается функция обратного вызова. Здесь, в функции обратного вызова, значение свойства intersectionRatio из объекта IntersectionObserver сравнивается с некоторым предопределенным значения и применение некоторых классов для целевого элемента, который изменяет цвет фона элемента. Мы можем использовать любую из этих деталей, таких как позиции, целевые элементы, isIntersecting, для выполнения наших требований.
Это представление браузера для каждого порога:
Для API доступны еще 2 метода.
1. Ненаблюдаемый(наблюдатель) — Остановить наблюдателя.
2. Отключить() — остановить всех наблюдателей.
Хорошо, все выглядит нормально. Но мы можем сделать это с помощью «onscroll», верно?
Конечно, этого варианта использования можно добиться с помощью события 'onscroll' в JavaScript. Используя событие прокрутки, мы можем определить положение и видимость определенного элемента. Но событие прокрутки — сложная вещь, и оно вызывает каждое движение прокрутки. Это приводит к проблемам с производительностью. Таким образом, Interview Observer — лучший способ использовать в таких сценариях.
Заключение
IntersectionObserverAPI — это один из современных API браузера, который поможет вам выполнить различные требования на стороне клиента, такие как отложенная загрузка, анимация, отслеживание активности пользователя, материалы, связанные с рекламой, бесконечная прокрутка и т. д. без ущерба для пользовательского опыта и производительности.
Теперь твоя очередь, попробуй. Удачного кодирования… Спасибо…
