Що таке JavaScript Intersection Observer API? 📱Це інструмент для асинхронного спостереження за змінами видимості елемента відносно його батьківського контейнера або області перегляду (viewport). API дозволяє дізнатися, коли елемент потрапляє в зону видимості (intersects), і виконати певні дії.
Використовується для: 1. Лінивого завантаження зображень.
2. Анімації при скролінгу.
3. Відстеження видимості реклами.
4. Підвантаження нових даних, коли користувач дійшов до кінця сторінки.
Приклад з лінивим завантаженням зображень:
<img class="lazy" data-src="example.jpg" alt="Lazy loaded image">
<img class="lazy" data-src="example2.jpg" alt="Another lazy loaded image">
Атрибут data-src зберігає шлях до зображення, а src не заповнений, щоб уникнути завантаження до часу.
// Знаходимо всі зображення з класом "lazy"
const images = document.querySelectorAll('.lazy');
// Створюємо Intersection Observer
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // Завантажуємо зображення
img.classList.remove('lazy'); // Видаляємо клас
observer.unobserve(img); // Зупиняємо спостереження за цим елементом
}
});
});
// Прив'язуємо спостерігач до кожного зображення
images.forEach(img => {
imageObserver.observe(img);
});
#useful
👀 Telegram | Youtube | LinkedIn