tgoop.com/startpoint_dev/69
Last Update:
🖇 IntersectionObserver – что он пересекает и кого обозревает?
IntersectionObserver в JavaScript – это API, с помощью которого можно подписаться на изменение видимости определённых элементов страницы относительно их родительских элементов или глобальной области просмотра (viewport). Таким образом, можно асинхронно отслеживать появление или исчезновение тех или иных элементов документа.
💡 Для чего он может быть полезен?
1. Ленивая загрузка (lazy loading) изображений и видео: загрузка медиа-контента только тогда, когда пользователь прокручивает страницу, и контент должен скоро появиться в области видимости.
2. “Бесконечный” скролл: динамическая подгрузка данных при достижении конца страницы, чтобы улучшить производительность при работе с большими объёмами данных.
3. Отслеживание взаимодействия с рекламой: определение, просматривал ли пользователь рекламные блоки достаточное время для учета показов.
4. Анимации: активация анимации только тогда, когда элемент становится видимым на экране.
📝 Рассмотрим пример применения IntersectionObserver для реализации бесконечного скролла. Пусть на странице есть 2 элемента:
<div id="container">
<!-- Сюда динамически добавляем данные -->
</div>
<div id="sentinel"></div> <!-- Элемент, за которым мы наблюдаем -->
И мы хотим загружать новые данные, когда пользователь промотает страницу до конца контейнера. Тогда JavaScript-код будет выглядеть следующим образом:
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById('container');
const sentinel = document.getElementById('sentinel');
// Обработчик загрузки и добавления новых данных
const loadItems = () => { /* ... */ };
// Обработчик измненения видимости элемента
const handler = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadItems();
}
});
}
// Создаем объект IntersectionObserver с колбэком
const observer = new IntersectionObserver(handler);
// Подписываемся на наш элемент
observer.observe(sentinel);
// Загружаем первую порцию данных
loadItems();
});
Таким образом, мы подписываемся на невидимый элемент, который находится в самом низу нашего списка данных. Как только этот элемент появится в области видимости (то есть выполнится условие
entry.isIntersecting), будет инициирована загрузка новых данных, после чего элемент снова окажется внизу страницы. Также в реализации в реальной жизни стоит учесть, что элементы могут закончиться, и не инициировать лишние загрузки при каждом появлении отслеживаемого элемента в области видимости.🔗 В итоге мы имеем, что IntersectionObserver – это мощный инструмент для оптимизации производительности и улучшения пользовательского интерфейса на веб-страницах. Подробнее о нём и его возможностях можно почитать в официальной документации на сайте MDN.
BY Настя Котова // Frontend & Node.js
Share with your friend now:
tgoop.com/startpoint_dev/69