Intersection Observer - дозволяє відстежувати зміну видимості елементів на сторінці

У JavaScript є багато інструментів для взаємодії з DOM-структурою веб-сторінок, і Intersection Observer API є одним з них. Цей API дозволяє відстежувати зміну видимості елементів на сторінці, коли вони перетинаються з вікном браузера або іншим елементом. У цій статті ми розглянемо, як використовувати Intersection Observer API з прикладами використання та кодом.

Огляд Intersection Observer API

Intersection Observer API дозволяє відстежувати перетин елементів з вікном браузера або іншим елементом. Це дозволяє реагувати на зміну видимості елементів, коли вони потрапляють в зону видимості або залишають її.

Для використання Intersection Observer API ми створюємо екземпляр IntersectionObserver, який приймає функцію зворотнього виклику (callback), що викликається при зміні видимості елементів. Ця функція отримує список об'єктів IntersectionObserverEntry, кожен з яких містить інформацію про елемент та його видимість.

const observer = new IntersectionObserver(callback, options);

Функція зворотного виклику (callback) приймає список об'єктів IntersectionObserverEntry:

function callback(entries, observer) {
  // Обробка зміни видимості елементів
}

Приклад 1: Зміна стилю елементу при його появі в зоні видимості

У цьому прикладі ми використовуємо Intersection Observer API, щоб змінити стиль елементу при його появі в зоні видимості.

<div class="box">Якийсь текст</div>

const box = document.querySelector('.box');
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5,
};

const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.backgroundColor = 'red';
    } else {
      entry.target.style.backgroundColor = 'transparent';
    }
  });
}, options);

observer.observe(box);

У цьому прикладі ми відстежуємо зміну видимості елементу з класом .box і встановлюємо червоний колір фону, якщо елемент потрапляє в зону видимості з пороговим значенням 0,5. Якщо елемент не перетинається з вікном браузера, фоновий колір змінюється на прозорий.

Приклад 2: Завантаження зображення при його появі в зоні видимості

У цьому прикладі ми використовуємо Intersection Observer API, щоб завантажити зображення при його появі в зоні видимості.

<img class="lazy" data-src="path/to/image.jpg" alt="Зображення">

const lazyImages = document.querySelectorAll('.lazy');
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5,
};

const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const src = image.getAttribute('data-src');
      image.setAttribute('src', src);
      image.classList.remove('lazy');
      observer.unobserve(image);
    }
  });
}, options);

lazyImages.forEach(image => {
  observer.observe(image);
});

У цьому прикладі ми відстежуємо зміну видимості зображень з класом .lazy. Коли зображення потрапляє в зону видимості з пороговим значенням 0,5, ми завантажуємо його і встановлюємо його src атрибут зі значенням з атрибута data-src. Потім ми видаляємо клас .lazy, щоб відключити відкладене завантаження зображення, та перестаємо спостерігати за зображенням.

Приклад 3: Нескінченна прокрутка

У цьому прикладі ми використовуємо Intersection Observer API для завантаження додаткового контенту, коли користувач доскролює до кінця сторінки.

<div id="container">
  <ul id="list">
    <li>Елемент 1</li>
    <li>Елемент 2</li>
    <li>Елемент 3</li>
    <li>Елемент 4</li>
    <li>Елемент 5</li>
    <li>Елемент 6</li>
    <li>Елемент 7</li>
    <li>Елемент 8</li>
    <li>Елемент 9</li>
    <li>Елемент 10</li>
  </ul>
  <div id="loader">Завантаження...</div

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5,
};

const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreData();
    }
  });
}, options);

observer.observe(document.querySelector('#loader'));

У цьому прикладі ми створюємо новий екземпляр IntersectionObserver з пороговим значенням 0,5 та спостерігаємо за елементом з ідентифікатором #loader. Коли цей елемент потрапляє в зону видимості з пороговим значенням 0,5, ми викликаємо функцію loadMoreData(), яка завантажує додатковий контент на сторінку.

Висновок

Intersection Observer API є потужним інструментом, який дозволяє відстежувати зміну видимості елементів на сторінці та виконувати певні дії, коли вони потрапляють в зону видимості. Це може бути корисно для відкладеного завантаження зображень, анімації, підзавантаження контенту і багатьох інших випадків використання. Використання Intersection Observer API дозволяє покращити швидкість завантаження сторінки та підвищити її продуктивність.