Como usar Intersection Observer para lazy loading avançado (para deixar seu site mais rápido!)
Olá, querido(a) cliente da GeHost! 👋
Se você já percebeu que seu site demora a carregar imagens, especialmente quando tem muitas, ou se quer deixar o seu site mais leve e rápido — hoje vamos aprender uma técnica poderosa chamada Intersection Observer, usada para fazer o lazy loading avançado.
Imagine: você entra no seu site e só carrega as imagens que estão visíveis na tela — as que estão abaixo da rolagem, só carregam quando você chega perto delas. Isso economiza tempo, dados e melhora muito a experiência do usuário.
É como se seu site dissesse: “Espere, eu só carrego o que você está vendo agora!” 🎯
O que é Intersection Observer?
É uma ferramenta do JavaScript que "observa" quando um elemento (como uma imagem) entra ou sai da área visível do navegador. Quando ele aparece na tela, só então o site carrega a imagem.
Não é magia — é tecnologia inteligente que ajuda seu site a ser mais rápido!
Passo a passo: Como usar isso no seu site (com exemplos simples)
- Abra o Gerenciador de Arquivos do cPanel
Para fazer isso, faça login no cPanel da sua conta GeHost:
Na tela do cPanel, clique em Gerenciador de Arquivos (File Manager).
Essa é a área onde você gerencia todos os arquivos do seu site, como HTML, CSS e JavaScript.
Selecione a pasta public_html (ou a pasta raiz do seu site).
É aqui que estão os arquivos principais do seu site. Se você tem um site com nome de domínio, ele geralmente está dentro dessa pasta.
Encontre seu arquivo HTML principal (geralmente chamadoindex.html).
Abra esse arquivo com o editor do Gerenciador de Arquivos (clique duas vezes nele).
Adicione o código JavaScript
Na parte do <head> ou logo antes do fechamento do </body>, adicione este código:
<script>
// Observador de interseção
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img);
}
});
});
// Observa todas as imagens com data-src
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
</script>
Altere o código das imagens no HTML
No seu arquivo HTML, troque as imagens normais assim:
<img src="foto.jpg" alt="Uma bela imagem" />
Por este formato:
<img data-src="foto.jpg" alt="Uma bela imagem" class="lazy" />
Essa mudança é essencial: o data-src é onde a imagem real está guardada, mas só será carregada quando o usuário chegar perto.
Salve o arquivo, atualize sua página no navegador e role para baixo. Você vai ver que as imagens só carregam quando aparecem na tela!
Dica do Sensei GeHost 🌿
Se você usar imagens grandes (como 2000x1500px), o lazy loading é essencial. Ele evita que o site fique lento só por carregar tudo de uma vez. Com isso, seu site carrega mais rápido, seu cliente fica feliz e o Google também gosta — isso melhora o SEO!
Pronto! Você agora domina o lazy loading avançado.
Seu site está mais leve, mais rápido e mais moderno. E o melhor? Tudo com código simples, que você mesmo pode controlar.
Se precisar de ajuda com o código ou quiser que a GeHost ajude a implementar, é só chamar! Estamos aqui para te ajudar, sempre. 💚
Até a próxima dica, com carinho,
Sensei da GeHost 🍃
