Para que serve o atributo loading
nas imagens?
Para destoar do comportamento padrão de carregamento das imagens em um documento HTML. O atributo loading
é uma enumeração que pode possuir dois valores:
eager
, que faz com que a imagem seja carregada imediatamente (juntamente com o carregamento da própria página), sem considerar sua posição no documento. É o comportamento padrão.
lazy
(a novidade), que faz com que a imagem só seja carregada se estiver na iminência de entrar na viewport do usuário (ou seja, o que ele vê).
A vantagem imediata que se percebe é o adiamento (e eventualmente até dispensa) do carregamento de imagens que o usuário não irá visualizar imediatamente. Em ambientes (como celulares) no qual o acesso à internet é um pouco menos poderoso, deixar de carregar um recurso (como imagem) mais pesado é algo de extrema valia no quesito experiência do usuário.
Como funciona a opção lazy
no atributo loading
especificamente?
O funcionamento pode variar levemente entre navegadores, mas, de modo geral, quando se define loading="lazy"
em algum elemento que o suporte, o navegador segue estes passos.
Assumindo que abaixo o termo "imagens" refira-se a elementos que suportam a configuração loading="lazy"
e que esteja com o atributo loading
definido como lazy
, tem-se:
As imagens que estão no viewport do usuário são imediatamente carregadas. O comportamento é análogo ao loading="eager"
, que é o padrão.
As imagens que estão relativamente abaixo do viewport do usuário não são carregadas.
- Uma vez que o usuário, ao realizar scroll pela página, aproxima-se da imagem, o navegador inicia o processo de carregamento. A distância (referida como threshhold pode variar[1]) para que o carregamento inicie é variável.
- Na maioria das vezes a imagem já terá sido carregada quando a viewport do usuário a atingir. Nesse sentido, na maioria das vezes, a imagem é carregada a partir da iminência de se tornar visível.
É importante frisar que, para que o navegador calcule a distância que precisa esperar para carregar a imagem de forma mais precisa, é ideal e recomendado que, sempre que se defina uma imagem com loading="lazy"
também sejam especificados largura e altura (através de atributos como width
e height
, respectivamente). Por exemplo:
<img src="image.png" loading="lazy" width="200" height="200" alt="..." />
Esse atributo é específico da tag <img />
ou funciona em outras tags?
Até onde pude verificar, o loading="lazy"
é funcional em elementos de tag img
e iframe
.
Notas finais
Esse comportamento é passível de polyfill. Um exemplo.
Como o suporte ainda é relativamente baixo, pode-se verificar se o navegador o suporta do seguinte modo:
// Para <img>:
HTMLImageElement.prototype.hasOwnProperty('loading'); //=> true ou false
// Para <iframe>:
HTMLIFrameElement.prototype.hasOwnProperty('loading'); //=> true ou false
Para maior aprofundamento, sugiro a leitura deste artigo.