Lazy-loading nativo de imagens (sem Javascript)

Autor: Paul Facklam || Versão original

Sobre o carregamento lento (lazy-loading) e por que você deve usá-lo

A rede mundial evoluiu nas últimas décadas e os sites de hoje consistem não apenas em texto e cores, mas também em inúmeros conteúdos de mídia, como por exemplo, imagens.

                <img src="/path/to/your/image.jpg &quot; alt="Awesome image &quot; />
                

O lazy-loading é uma técnica que adia o carregamento de recursos não-críticos no momento do carregamento da página. Em vez disso, esses recursos não-críticos são carregados no momento em que forem necessários. No que diz respeito às imagens, "não crítico" costuma ser sinônimo de "fora da tela". fonte: web.dev/lazy-loading escrito por Jeremy Wagner e Rachel Andrew

Isso significa que, usando o lazy-loading, alcançamos os seguintes benefícios em relação à forma tradicional de utilizar a tag HTML:

• Ganhos de desempenho - com o lazy loading, podemos melhorar a velocidade de carregamento reduzindo o número de imagens que precisam ser carregadas inicialmente.
• Redução de custo - Uma imagem carregada por meio do lazy-loading pode nunca precisar ser carregada porque o usuário não atingiu a posição da imagem na página.

OK, soa vantajoso. Como podemos fazer isso acontecer? O que precisamos para isso? Vamos começar!

A abordagem antiga (com Javascript)

Existem muitos snippets e scripts como vanilla-lazyload por aí que permitem o carregamento lento via JavaScript. Em quase todos os casos, um atributo data é usado para evitar o carregamento inicial da imagem.

                <img data-src="/path/to/your/image.jpg &quot; alt="Awesome image &quot; />
                

Mas como a imagem é carregada? Para conseguir isso, uma das duas técnicas a seguir é geralmente usada.

Event Listeners

Essa técnica usa event listeners nos eventos de scroll, resize e orientationChange no navegador. Se um dos eventos mencionados for disparado e assumindo que a imagem entre em visualização (viewport), o atributo data-src é substituído pelo atributo src para acionar a chamada de carregamento. Veja em ação neste codepen.

IntersectionObserver API

Ao contrário do primeiro método, a imagem é observada (de forma assíncrona) usando a API IntersectionObserver. A imagem é carregada alterando o atributo data-src para src assim que entrar em visualização (viewport). Veja um codepen com o exemplo.

Mas e se eu disser que você não precisa de Javascript? Sim, você ouviu direito! Zero Javascript.

A nova abordagem (HTML)

Então, como é essa nova forma de lazy-loading? Não se preocupe, é bastante simples. Você apenas tem que adicionar "loading = "lazy" à sua tag de imagem e pronto.

                <img src="/path/to/your/image.jpg &quot; loading="lazy &quot; />
                

Com este novo atributo de carregamento, você pode adiar completamente o carregamento de imagens fora da tela (e até mesmo iframes em alguns navegadores) para quando eles entrarem em visualização (viewport). Chega de conversa, vamos ver em ação! Veja um codepen com o exemplo.

O atributo vem com três valores:

• auto - (modo default) igual a não incluir o atributo.
• lazy - (Adia o carregamento de recursos até que ele entre no viewport.
• eager - Carrega o recurso imediatamente.

E quanto ao suporte do navegador?

O atributo é compatível com quase todos os navegadores populares (Chrome, Edge, Opera e Firefox). A implementação do Safari está em andamento e quase concluída. Se você precisar de informações mais detalhadas sobre o suporte para vários navegadores, pode verificar em caniuse.com.

O que acontece se um navegador não suportar o atributo?

Os navegadores que não oferecem suporte ao atributo de carregamento simplesmente o ignoram sem quaisquer efeitos colaterais. Felizmente, existe um polyfill disponível no Github chamado loading-attribute-polyfill que pode ser utilizado nesses casos.

                if ('loading' in HTMLImageElement.prototype) {
                  // Legal! O browser suporta o atributo
              } else {
                 // Houston...precisamos de um polyfill!
              }              
                

Existem limitações?

Embora seja muito legal deixar o navegador fazer o trabalho de lazy-loading, você deve estar ciente de algumas limitações que surgem ao usar o atributo:

• Ao contrário das soluções com Javascript, você não tem nenhuma influência no limite para carregar o recurso. Isso faz parte do código do navegador e não pode ser alterado por enquanto.
• O atributo não pode ser usado em combinação com imagens de fundo CSS. Talvez isso esteja disponível em um futuro próximo, mas não agora.
• Se imprimir a página da web é um caso de uso real para você, observe que há um bug aberto para o atributo de carregamento.