Lazy load de imagem Componentes

O que é

Página com muitas fotos (galeria, cardápio, catálogo, portfólio) fica lenta porque o navegador baixa todas de uma vez, até as que estão lá embaixo. Com sw-lazy, cada foto espera: ela só começa a baixar quando a pessoa rola até perto dela. Enquanto isso, aparece um pequeno círculo girando no lugar, e quando a foto chega ela surge com um leve esmaecer.

Você coloca o endereço da foto em sw-lazy-src (e não em src). O SWCore vigia a página e, quando a foto fica a uns 200 px de aparecer, baixa o arquivo; só depois de ele estar inteiro troca a imagem e tira o carregando. Tudo automático: vem no arquivo principal, sem configuração.

Quando usar

• Galerias e catálogos com mais de uma tela de fotos.
• Fotos no meio ou no fim da página (depoimentos, equipe, portfólio).
• Não use na foto grande do topo da página (a primeira coisa que a pessoa vê): ela deve carregar normal, com src, para aparecer o mais rápido possível.

Comece aqui

1. 1

   Coloque o SWCore na página (CSS no <head>, JS no fim do <body>).

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Na imagem, troque src por sw-lazy-src e acrescente sw-lazy. Sempre com alt, width e height.

   <img sw-lazy sw-lazy-src="/fotos/morangos.webp" width="600" height="400" alt="Morangos frescos numa tigela">

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Uma foto

As fotos destes quadros vêm da internet e só começam a baixar quando você chega perto. Em conexão lenta dá para ver o círculo girando antes de a foto aparecer.

2. Galeria

Numa grade, cada foto espera a sua vez. Role a página devagar: as de baixo só baixam quando você chega nelas.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Cardápio com fotos dos pratos Ao vivo

<div class="l l-2 gap-4">
  <figure class="bg-sur bd r-m ov-hi m-0">
    <img sw-lazy sw-lazy-src="/cardapio/salada.webp" width="600" height="400" alt="Salada da casa">
    <figcaption class="p-m"><strong>Salada da casa</strong> — R$ 32</figcaption>
  </figure>
  <figure class="bg-sur bd r-m ov-hi m-0">
    <img sw-lazy sw-lazy-src="/cardapio/frutas.webp" width="600" height="400" alt="Frutas do dia">
    <figcaption class="p-m"><strong>Frutas do dia</strong> — R$ 18</figcaption>
  </figure>
</div>

<script>
  // foto que falhou mostra o src provisório (ou o alt): troque por uma imagem reserva
  document.addEventListener('sw:lazy:error', (e) => {
    const img = e.target;
    img.src = '/img/sem-foto.webp';
  });

  // saber quando cada foto chegou (ex.: contar, animar)
  document.addEventListener('sw:lazy:loaded', (e) => {
    console.log('carregou', e.target.currentSrc);
  });
</script>

<!-- topo: carrega na hora, com prioridade -->
<img src="/img/banner.webp" width="1600" height="700" alt="Fachada da loja" fetchpriority="high">

<!-- mais abaixo: lazy -->
<img sw-lazy sw-lazy-src="/img/equipe.webp" width="800" height="500" alt="Nossa equipe">

Eventos

Precisa de quê

• swcore.min.css e swcore.min.js — já vem no pacote principal.

Cuidados — erros comuns

• O endereço vai em sw-lazy-src. Escrever sw-lazy="/foto.jpg" não faz nada: o sw-lazy só liga o recurso.
• Colocar o mesmo endereço também em src faz a foto baixar na hora — aí o lazy não serve para nada. No src, só uma miniatura leve (ou nada).
• Um src provisório "leve" (miniatura borrada de poucos KB) aparece enquanto a foto definitiva não chega. Sem src, o lugar fica vazio com o círculo girando.
• Sem width e height, a página "pula" quando cada foto chega. Escreva o tamanho original da foto.
• Se a foto não existir, fica o src provisório ou, sem ele, o ícone de imagem quebrada do navegador com o alt. Use o evento sw:lazy:error para pôr uma reserva (receita acima).
• Tamanho/cantos definidos por classe na própria <img> podem não valer: o SWCore envolve a imagem numa moldura e força largura 100%. Ponha a classe num elemento em volta (como no quadro "cantos arredondados").

O que ele não faz

• Só vale para <img>. Foto de fundo feita com CSS (background-image) não é atrasada.
• Não escolhe tamanhos diferentes por tela (srcset): baixa sempre o endereço de sw-lazy-src.