Imagens de carregamento lento
As imagens podem aparecer em uma página da web por estarem embutidas no HTML como <img> ou como imagens de fundo CSS. Nesta publicação, você descobrirá como fazer o carregamento lento de ambos os tipos de imagem.
Imagens inline #
Os candidatos de carregamento lento mais comuns são as imagens usadas nos elementos <img>. Com imagens embutidas, temos três opções para carregamento lento, que podem ser usadas em combinação para a melhor compatibilidade entre os navegadores:
- Usando o carregamento lento no nível do navegador
- Usando o observador de interseção
- Usando manipuladores de eventos de rolagem e redimensionamento
Usando carregamento lento no nível do navegador #
O Chrome e o Firefox oferecem suporte ao carregamento lento com o atributo de loading. Este atributo pode ser adicionado aos <img> e também aos elementos <iframe>. Um valor lazy informa ao navegador para carregar a imagem imediatamente se ela estiver na janela de visualização e para buscar outras imagens quando o usuário rolar próximo a elas.
Consulte o campo de loading da tabela de compatibilidade do navegador do MDN para obter detalhes sobre o suporte do navegador. Se o navegador não suportar o carregamento lento, o atributo será ignorado e as imagens serão carregadas imediatamente, normalmente.
Para a maioria dos sites, adicionar este atributo a imagens embutidas aumentará o desempenho e salvará os usuários de imagens para as quais eles podem nunca rolar. Se você tiver um grande número de imagens e quiser ter certeza de que os usuários de navegadores sem suporte para o benefício de carregamento lento, você precisará combinar isso com um dos métodos explicados a seguir.
Para saber mais, verifique o carregamento lento no nível do navegador para a web.
Usando o observador de intersecção #
Para preencher o carregamento lento de <img>, usamos JavaScript para verificar se eles estão na janela de visualização. Se estiverem, seus src (e às vezes srcset ) são preenchidos com URLs para o conteúdo de imagem desejado.
Se você já escreveu código de carregamento lento antes, pode ter realizado sua tarefa usando manipuladores de eventos, como scroll ou resize. Embora essa abordagem seja a mais compatível entre os navegadores, os navegadores modernos oferecem uma maneira mais eficiente e performante de fazer o trabalho de verificação da visibilidade do elemento por meio da API Intersection Observer.
O Intersection Observer é mais fácil de usar e ler do que o código que depende de vários manipuladores de eventos, porque você só precisa registrar um observador para observar os elementos, em vez de escrever um tedioso código de detecção de visibilidade do elemento. Tudo o que resta fazer é decidir o que fazer quando um elemento estiver visível. Vamos supor este padrão de marcação básico para seus elementos <img>
<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="Sou uma imagem!">Existem três partes relevantes dessa marcação nas quais você deve se concentrar:
- O
class, com o qual você selecionará o elemento em JavaScript. - O
src, que faz referência a uma imagem de espaço reservado que aparecerá quando a página for carregada pela primeira vez. - Os
data-srcedata-srcset, que são atributos de espaço reservado contendo a URL para a imagem que você carregará assim que o elemento estiver na janela de visualização.
Agora vamos ver como usar o Intersection Observer em JavaScript para carregar lentamente imagens usando este padrão de marcação:
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to event handlers here
}
});No DOMContentLoaded do documento, este script consulta o DOM para todos os <img> com uma classe de lazy. Se o observador de intersecção estiver disponível, crie um novo observador que execute um retorno de chamada quando os img.lazy entrarem na janela de visualização.
O Intersection Observer está disponível em todos os navegadores modernos. Portanto, usá-lo como um polyfill para o loading="lazy" garantirá que o carregamento lento esteja disponível para a maioria dos visitantes. Não está disponível no Internet Explorer. Se o suporte do Internet Explorer for essencial, continue lendo.
Usando manipuladores de eventos para suporte ao Internet Explorer #
Embora você deva usar o Intersection Observer para carregamento lento, os requisitos do seu aplicativo podem ser tais que a compatibilidade do navegador seja crítica. Você pode usar polyfill no suporte do Intersection Observer (e isso seria mais fácil), mas também pode voltar ao código usando os manipuladores de eventos scroll , resize e, possivelmente orientationchange getBoundingClientRect em conjunto com getBoundingClientRect para determinar se um elemento está na janela de visualização.
Assumindo o mesmo padrão de marcação anterior, este exemplo de Glitch usa getBoundingClientRect em um scroll para verificar se algum dos img.lazy está na janela de visualização. Uma setTimeout é usada para atrasar o processamento e uma active contém o estado de processamento que é usado para controlar as chamadas de função. Como as imagens são carregadas lentamente, elas são removidas da matriz de elementos. Quando a matriz de elementos atinge o length 0, o código do manipulador de eventos de rolagem é removido.
Embora esse código funcione em praticamente qualquer navegador, ele tem problemas de desempenho em potencial, pois as setTimeout repetitivas podem ser um desperdício, mesmo se o código dentro delas for limitado. Neste exemplo, uma verificação está sendo executada a cada 200 milissegundos na rolagem do documento ou redimensionamento da janela, independentemente de haver uma imagem na janela de visualização ou não. Além disso, o trabalho tedioso de rastrear quantos elementos são deixados para o carregamento lento e desvincular o manipulador de eventos de rolagem é deixado para o desenvolvedor. Você pode descobrir mais sobre essa técnica no Guia completo para imagens de carregamento lento.
Resumindo: use o carregamento lento no nível do navegador com uma implementação do Intersection Observer de fallback sempre que possível e apenas use manipuladores de eventos se a compatibilidade mais ampla possível for um requisito crítico do aplicativo.
Imagens em CSS #
Embora as <img> sejam a maneira mais comum de usar imagens em páginas da web, as imagens também podem ser chamadas por meio da propriedade CSS background-image (e outras propriedades). O carregamento lento no nível do navegador não se aplica às imagens de fundo CSS, portanto, você precisa considerar outros métodos se tiver imagens de fundo para carregar lentamente.
Ao contrário dos <img> que carregam independentemente de sua visibilidade, o comportamento de carregamento de imagens em CSS é feito com mais especulação. Quando o documento e os modelos de objeto CSS e a árvore de renderização são construídos, o navegador examina como o CSS é aplicado a um documento antes de solicitar recursos externos. Se o navegador determinou que uma regra CSS envolvendo um recurso externo não se aplica ao documento como ele está construído no momento, o navegador não a solicita.
Esse comportamento especulativo pode ser usado para adiar o carregamento de imagens em CSS usando JavaScript para determinar quando um elemento está na janela de visualização e, subsequentemente, aplicando uma classe a esse elemento que aplica um estilo que invoca uma imagem de fundo. Isso faz com que o download da imagem seja feito no momento necessário, em vez de no carregamento inicial. Por exemplo, vamos pegar um elemento que contém uma grande imagem de fundo de herói:
<div class="lazy-background">
<h1>Here's a hero heading to get your attention!</h1>
<p>Here's hero copy to convince you to buy a thing!</p>
<a href="/buy-a-thing">Buy a thing!</a>
</div>O div.lazy-background normalmente conteria a imagem de fundo do herói invocada por algum CSS. Neste exemplo de carregamento lento, no entanto, você pode isolar a background-image do elemento div.lazy-background por meio de uma visible adicionada ao elemento quando ele está na janela de visualização:
.lazy-background {
background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}
.lazy-background.visible {
background-image: url("hero.jpg"); /* The final image */
}A partir daqui, use JavaScript para verificar se o elemento está na janela de visualização (com Intersection Observer!) E adicione a classe visible div.lazy-background naquele momento, que carrega a imagem:
document.addEventListener("DOMContentLoaded", function() {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
if ("IntersectionObserver" in window) {
let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
lazyBackgroundObserver.unobserve(entry.target);
}
});
});
lazyBackgrounds.forEach(function(lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
}
});Conforme indicado anteriormente, se você precisar de suporte do Internet Explorer para carregamento lento de imagens de fundo, precisará preencher o código do observador de intersecção devido à falta de suporte nesse navegador.
Bibliotecas de carregamento lento #
As seguintes bibliotecas podem ser usadas para imagens de carregamento lento.
- lazysizes é uma biblioteca de carregamento lento com todos os recursos que carrega lentamente imagens e iframes. O padrão que ele usa é bastante semelhante aos exemplos de código mostrados aqui, pois se liga automaticamente a uma classe
lazyload<img>e requer que você especifique URLs de imagem nosdata-srce/oudata-srcset, o conteúdo de que são trocados emsrce/ousrcset, respectivamente. Ele usa o Intersection Observer (que você pode preencher com polyfill) e pode ser estendido com vários plug -ins para fazer coisas como carregamento lento de vídeo. Saiba mais sobre como usar lazysizes. - vanilla-lazyload é uma opção leve para imagens de carregamento lento, imagens de fundo, vídeos, iframes e scripts. Aproveita o Intersection Observer, oferece suporte a imagens responsivas e permite o carregamento lento no nível do navegador.
- lozad.js é uma outra opção leve que usa apenas observador de intersecção. Como tal, tem alto desempenho, mas precisará ser polyfilled antes de poder ser usado em navegadores mais antigos.
- yall.js é uma biblioteca que usa o Intersection Observer e usa manipuladores de eventos. É compatível com o IE11 e os principais navegadores.
- Se você precisar de uma biblioteca de carregamento lento específico do React, considere o react-lazyload. Enquanto ele não usa Intersection Observer, ele fornece um método familiar de imagens carregamento lento para aqueles acostumados a desenvolver aplicações com React.