JavaScript IntersectionObserver.observe() — почати стежити за елементом

Метод observe() починає стежити за елементом: повідомляти, коли той з'являється в полі зору або зникає.

правити

Загальний опис

Одна деталь, яка спершу дивує: обробник спрацьовує одразу після виклику, ще до будь-якої прокрутки — щоб повідомити поточний стан. Тобто на елемент, який уже видно, ти отримаєш isIntersecting: true негайно.

Це зручно (не треба окремо перевіряти початковий стан), але про це варто знати: код усередині обробника виконається раніше, ніж очікуєш.

Один спостерігач може стежити за багатьма елементами — створювати окремий на кожну картинку не треба.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
observe	51+	55+	12.1+	38+	15+	-

Підтримка: мобільні переглядачі

Переглядач
observe	51+	yes	yes	12.2+

Приклади

+ запропонувати свій приклад у пісочниці

<img data-src="/img/logo.svg" alt="">
<img data-src="/img/logo.svg" alt="">

const observer = new IntersectionObserver(entries => {
    for (const entry of entries) {
        if (entry.isIntersecting) {
            entry.target.src = entry.target.dataset.src;
            observer.unobserve(entry.target);
        }
    }
});

// один спостерігач — багато елементів
document.querySelectorAll('img[data-src]').forEach(img => {
    observer.observe(img);
});

// обробник спрацює ОДРАЗУ, з поточним станом