Carregamento lento de imagens

O carregamento lento de imagens é uma prática popular há uma década e por um bom motivo: as imagens geralmente são os downloads mais pesados em uma determinada página da Web e evitar o descarregamento de imagens que nunca são vistas economiza a largura de banda do usuário. Existem plug-ins para carregamento lento de imagens em todas as estruturas JavaScript, ou o senhor pode usar o API do observador de interseçãomas essa prática se tornou tão comum que provavelmente deveria haver uma API de navegador para acomodá-la… e o Chrome está implementando exatamente isso. Vamos dar uma olhada em como a API de carregamento preguiçoso nativa de entrada funcionará!

Essa nova API de carregamento lento se resume a um simples loading="lazy" e valor no img tags:

<img src="https://davidwalsh.name/path/to/logo.png" loading="lazy">

Para experimentar essa nova API, o senhor pode adicionar um onLoad à imagem:

<img src="https://davidwalsh.name/path/to/logo.png" loading="lazy"  onload="alert('Loaded!');">

Quando o usuário rola a tela dentro do alcance da imagem, o download e a renderização são acionados. Há três valores para esse atributo:

• auto – o comportamento padrão para o carregamento de imagens atualmente
• lazy – carrega a imagem quando ela se torna visível com base na posição de rolagem
• eager – carrega a imagem imediatamente, independentemente da posição de rolagem

Dê uma olhada nesta demonstração do loading="lazy":

Veja a caneta jOOoLXO por David Walsh (@darkwing) em CodePen.

A adição de uma API nativa para um padrão antigo é algo que me empolga – isso me lembra os dias do MooTools, que desencadeou a revolução do HTML5, adicionando o que sabemos que precisamos desde sempre. O que o senhor pensa sobre essa nova implementação?