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

Метод unobserve() припиняє стежити за одним елементом, лишаючи решту під наглядом.

правити

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

Для одноразових дій він обов'язковий. Ліниве завантаження картинки має спрацювати раз — після цього спостерігати за нею немає жодного сенсу, а ресурси вона й далі споживатиме.

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

правити

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

Переглядачі

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

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

Переглядач
	51	55	12.1	38	15	—

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

Переглядач
	51	51	55	12.2

Приклади

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

const observer = new IntersectionObserver((entries, self) => {
    for (const entry of entries) {
        if (!entry.isIntersecting) {
            continue;
        }

        entry.target.classList.add('visible');

        // спрацювало один раз — знімаємо
        self.unobserve(entry.target);
    }
}, { threshold: 0.25 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));