Carrega imagens apenas quando entram na área visível da tela usando Intersection Observer.
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
const img = entry.target;
img.src = img.dataset.src;
img.srcset = img.dataset.srcset || '';
img.classList.remove('lazy');
observer.unobserve(img);
});
}, { rootMargin: '200px' });
// Observar todas as imagens lazy
document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));
// HTML:
// <img class="lazy" data-src="foto.jpg" src="placeholder.jpg" alt="...">