25.12.2024

jQuery: Como Implementar Carregamento Lento para Imagens

Resposta Rápida

Se você deseja que suas imagens sejam carregadas somente quando o usuário rola até elas, utilize o mecanismo de carregamento lento. Para fazer isso, basta adicionar o atributo loading="lazy" à tag <img>:

<img src="sua-imagem.jpg" loading="lazy" alt="descrição">

Se você precisar de uma solução compatível com todos os navegadores, pode usar a API Intersection Observer. Ela monitora quando as imagens entram na área visível e as carrega nesse momento:

let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      let img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[lazy]').forEach(img => observer.observe(img));

No código HTML, substitua a URL original da imagem por data-src e adicione o atributo lazy:

<img data-src="sua-imagem.jpg" alt="descrição" lazy>

Nesse caso, o JavaScript controla o carregamento e substitui data-src por src no momento apropriado.

Otimizando Imagens para Carregamento Mais Rápido

Antes de implementar o carregamento lento, otimize suas imagens. Reduza o tamanho delas e converta-as para um formato mais eficiente, como WebP, para acelerar o processo de carregamento:

<img data-src="sua-imagem.webp" alt="descrição" lazy>

A melhor solução é usar imagens responsivas com os atributos srcset e sizes. Isso permite que os dispositivos selecionem as imagens com base na resolução:

<img 
  data-srcset="sua-imagem-300w.jpg 300w, sua-imagem-600w.jpg 600w"
  sizes="(max-width: 600px) 300px, 600px"
  data-src="sua-imagem-600w.jpg"
  alt="descrição"
  lazy>

Imagens Placeholder: A Chave para uma Rolagem Suave

Para evitar engasgos durante o carregamento da página, utilize elementos placeholder em vez de imagens: eles podem ser uma simples cor ou uma imagem de baixa resolução:

img[lazy] {
  background: #ccc; // Minimalismo
  background: url('placeholder.jpg'); // Ou talvez uma imagem placeholder desfocada?
}

Compatibilidade com Navegadores Antigos

Se você está buscando compatibilidade com navegadores mais antigos onde o carregamento lento não está disponível, considere usar um polyfill ou scripts JavaScript alternativos que você pode encontrar facilmente ou escrever por conta própria.

Carregamento Lento: Uma Variedade de Plugins e Abordagens

• jQuery Lazyload: integra-se bem com projetos jQuery.
• Intersection Observer e Limiares: começa a carregar as imagens à medida que se aproximam da área visível da tela.
• Conteúdo Dinâmico e AJAX: suporta carregamento lento em conteúdo gerado dinamicamente.

Visualização

No exemplo abaixo, você pode ver como o processo ocorre na página:

🔲 🔲 🔲 // Imagens na fila de carregamento
👀🚶‍♀️

À medida que o usuário rola para baixo na página:

🏞 🔲 🔲 // Primeira imagem carregada
👀🚶‍♀️

E mais adiante, conforme a rolagem continua:

🏞 🌇 🌉 // Imagens aparecem à medida que são vistas
👀🚶‍♀️

Assim, o carregamento lento otimiza o processo de visualização.

👣 Cada passo representa uma ação de rolagem.
🖼 O quadrado representa uma imagem carregando.
👀 Indica a área visível do usuário.

Fatores a Considerar Durante o Desenvolvimento

Lembre-se de que os usuários podem não ter acesso à Internet. Utilize service workers e a API Cache para armazenar imagens para uso offline e acelerar carregamentos futuros:

// Registrando um service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
  // O service worker 'sw.js' está pronto para uso!
}

Além disso, tenha em mente que a acessibilidade do conteúdo é importante. O carregamento lento não deve prejudicar os usuários de leitores de tela, e o atributo alt deve estar presente em todas as imagens.

Evite o Carregamento Concomitante de Todas as Imagens

Carregar um grande número de imagens que um usuário pode não ver não é muito eficiente. Analise o comportamento do usuário para prever quais imagens ele provavelmente visualizará e otimize o desempenho de acordo.

Recursos Úteis

1. Atributo Carregamento para Carregamento Lento - MDN
2. Carregamento Lento de Imagens no web.dev
3. Tempos de Carregamento Rápidos no web.dev
4. Imagens Responsivas - MDN
5. lozad.js no GitHub
6. Entendendo Promessas e Async/Await
7. Plugin jQuery Lazy

Video

Navigation