Как узнать, что элемент появился на экране
Короткий ответ
IntersectionObserver вызывает функцию, когда наблюдаемые элементы входят в видимую область или выходят из неё:
<style>
.box { height: 150px; margin: 400px 0; background: #ddd; transition: background 0.5s; }
.box.visible { background: #4caf50; }
</style>
<div class="box"></div>
<div class="box"></div>
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
entry.target.classList.toggle('visible', entry.isIntersecting);
}
});
document.querySelectorAll('.box').forEach((box) => observer.observe(box));
</script>Только один раз
Для ленивой загрузки прекращайте наблюдать за элементом после первого появления:
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));Частая ошибка
Для картинок есть способ проще, вообще без JavaScript, — атрибут loading="lazy".
<img src="photo.jpg" loading="lazy" alt="Photo">