Lazy Load Componentes

Carrega imagens só quando estão perto de entrar na tela.

O que é

Economiza banda e acelera o carregamento inicial da página — imagens fora da tela só baixam quando o usuário está prestes a rolar até elas.

Como funciona

Um IntersectionObserver compartilhado (com rootMargin: 200px, carrega um pouco antes de aparecer) observa todas as img[sw-lazy]. Ao entrar na margem, carrega a imagem real numa Image() de teste antes de trocar o src — evita mostrar um estado quebrado se a URL falhar.

Exemplos

1. Padrão — já reserva o tamanho certo (sem pulo de layout) Ao vivo

O placeholder já nasce com a mesma proporção da imagem real (width/height + aspect-ratio) — o espaço reservado não muda quando a imagem de verdade chega, zero salto de layout (CLS).

<!-- width/height reais da imagem (proporção correta) + placeholder do mesmo tamanho.
     sw-lazy-wrap é opcional: só necessário se você quiser o spinner de carregamento
     (img sozinho não aceita ::after, por isso o spinner vive no wrapper). -->
<div sw-lazy-wrap class="minha-imagem-wrap">
  <img sw-lazy
       sw-lazy-src="fabric-chrome.webp"
       src="placeholder-leve.svg"
       width="1122" height="1402"
       class="minha-imagem">
</div>

<!-- CSS — nunca style="" inline, sempre uma classe -->
<style>
.minha-imagem { width: 100%; max-width: 22.5rem; aspect-ratio: 1122 / 1402; object-fit: cover; }
</style>

2. O oposto do Lazy Load — pré-carregar ANTES de precisar Ao vivo

Lazy Load atrasa o carregamento (bom pra imagem longe da dobra). Quando é o contrário — uma imagem que vai aparecer em 1 segundo (próximo slide, próxima etapa de um wizard) — o certo é pré-carregar antes, pra ela já estar pronta na hora. Isso é o módulo Pré-carregamento, companheiro do Lazy Load:

// Pré-carrega 1 imagem antes de precisar dela
const img = await SWMotion.preloadImage('proximo-slide.webp');
container.appendChild(img); // já decodificada, aparece em 0ms

// Pré-carrega um lote inteiro, com progresso
SWMotion.preloadImages(
  ['foto1.webp', 'foto2.webp', 'foto3.webp'],
  (carregadas, total) => console.log(carregadas + '/' + total)
);

Regra prática: imagem longe da dobra → sw-lazy (este componente). Imagem que vai aparecer em breve (próximo passo, próximo slide) → SWMotion.preloadImage(). Nunca as duas juntas na mesma imagem — são estratégias opostas.

Atributos

sw-lazy-src

URL real da imagem (o src inicial pode ser um placeholder leve)

Variantes

Nenhum.

Eventos

sw:lazy:loaded

—

sw:lazy:error

—

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorCropper Próximo →Table