Você está em boa companhia com suporte incrível 🤝

Intersection Observer para lazy load

Carrega imagens apenas quando entram na área visível da tela usando Intersection Observer.

Time Full Services Time Full Services
JavaScript
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="...">

Seja PRO.

Tenha acesso a snippets de código premium — PHP, JavaScript, CSS e HTML prontos para usar em seus projetos.

Conhecer o plano Pro →