JavaScript Academy · Aula

Carregamento tardio de imagens

Carregue imagens somente quando elas aparecerem.

Carregamento tardio de imagens é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

A ideia do carregamento sob demanda

O carregamento sob demanda adia o download das imagens até que elas estejam prestes a entrar na área de visualização. Isso economiza largura de banda e acelera o carregamento inicial da página, especialmente em páginas longas com muitas imagens.

Armazenando a URL real

O truque é não colocar inicialmente a URL real da imagem em src. Armazene-a em um atributo data-src para que o navegador ainda não a baixe.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

Selecionando imagens para carregamento sob demanda

Reúna todas as imagens que precisam de carregamento sob demanda. Uma convenção comum é usar uma classe compartilhada ou a presença de data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

Criando o observer

Crie um observer cuja função de retorno carregue a imagem real assim que ela entrar em interseção. Use rootMargin para que a imagem comece a carregar um pouco antes de aparecer.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

Carregando na interseção

Quando uma imagem entrar em interseção, copie seu data-src para src. Em seguida, o navegador fará o download e a exibirá.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

Interrompendo a observação após o carregamento

Depois de carregada, uma imagem não precisa mais ser observada. Chame unobserve para liberar recursos e impedir novos acionamentos.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

Iniciando a observação

Percorra cada imagem que será carregada sob demanda e comece a observá-la. O observer cuidará do restante enquanto o usuário rola a página.

lazyImages.forEach(img => observer.observe(img));

Exibindo um marcador temporário

Proporcione uma experiência fluida exibindo um pequeno marcador desfocado ou uma cor sólida enquanto a imagem real é carregada; depois, faça-a aparecer gradualmente no evento load da imagem.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

O atributo loading nativo

Os navegadores modernos também oferecem carregamento sob demanda nativo por meio de loading="lazy" em img e iframe. O observer de interseção continua sendo útil para controle personalizado, animações ou comportamentos alternativos.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

Limpando o atributo de origem de dados

Depois do carregamento, você pode remover o atributo data-src para manter o DOM organizado e evitar confusão em códigos ou consultas posteriores.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

O padrão completo

O carregamento sob demanda com o observer de interseção é um padrão organizado e eficiente: armazene as URLs em data-src, observe cada imagem, substitua a URL pela real quando houver interseção e, então, use unobserve. O resultado é uma página mais rápida, que carrega as imagens exatamente quando necessário.

Verificação rápida

Teste sua compreensão do carregamento de imagens sob demanda.

Recapitulação

Você criou o carregamento de imagens sob demanda:

Armazene a URL real em data-src.
Observe cada imagem com um observer de interseção.
Na interseção, copie data-src para src e use unobserve.
Use rootMargin para pré-carregar a imagem pouco antes de ela aparecer.
loading="lazy" nativo é uma alternativa mais simples.

Agora, vamos implementar a rolagem infinita.

Perguntas Frequentes

A aula “Carregamento tardio de imagens” é grátis?

Sim — o texto completo de “Carregamento tardio de imagens” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Carregamento tardio de imagens”?

Carregue imagens somente quando elas aparecerem. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Carregamento tardio de imagens”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy