Como funciona o carregamento lento?
Uma imagem HTML normal se parece com isso:
<img src="sample.jpg" width="100%"/>Plugins de carregamento lento reescrevem o código assim:
<img data-src="sample.jpg" width="100%"/>Como você notou,srcatributo foi alterado paradata-src.
Porque nãosrc, o navegador não carrega esta imagem inicialmente. Mais tarde, um pequeno código JavaScript verifica se a imagem está na janela de visualização (a janela de visualização do usuário) e se está dentro,data-srcvolta a issosrcqual navegador aciona o download e a exibição da imagem.
O que é carregamento preguiçoso nativo?
O Chrome vem com "carregamento lento nativo". Você pode ler sobre isso aqui.
O carregamento lento nativo tem a vantagem de que não há necessidade de JavaScript e geralmente é muito mais rápido, pois o navegador o faz "nativamente".
O código fica assim:
<img src="sample.jpg" loading="lazy" width="100%"/>O que são imagens voadoras?
Flying Images é um plugin de carregamento lento de alto desempenho. Ele usa o carregamento lento "nativo" do navegador, se disponível, caso contrário, use JavaScript regular para carregamento lento.
Imagens Voadoras também podem carregar imagens antes que as imagens apareçam na janela de visualização.
Você tem medo de carregamento lento porque prejudica a experiência do usuário?
Como as imagens voadoras são diferentes de outros plugins de carregamento lento?
- Usa carregamento lento integrado - use o carregamento lento integrado, se disponível (atualmente suportado apenas no Chrome), caso contrário, use JavaScript para carregar imagens lentamente.
- Carregar imagens antes de entrar na viewport - enquanto outros plugins carregam imagens quando estão "dentro" da janela de visualização, as imagens voadoras as carregam quando estão prestes a entrar na janela de visualização.
- JavaScript minúsculo - apenas 0,5 KB, compactado, reduzido.
- Se desejar, você pode usar apenas arquivos nativos – deseja oferecer suporte apenas ao Chrome? Você pode alternar para "somente nativo", que não injeta JavaScript.
- Reescreve todo o código HTML - nunca perca uma imagem devido ao carregamento lento (mesmo que seja adicionado por plugins de galeria).
- Enchimento transparente - uma pequena base64 transparente é adicionada a todas as imagens. Não há mais cintilação ao carregar imagens.
- Excluir palavras-chave - Quase todos os plugins de carregamento lento fornecem um recurso de exclusão, no entanto, imagens voadoras também podem excluir imagens do nó pai da imagem. Útil se sua imagem não tiver um nome de classe.
- Suporta navegadores com IE e JavaScript desabilitados - todas as imagens são carregadas instantaneamente se for o Internet Explorer ou mesmo se o JavaScript estiver completamente desabilitado (usando
noscriptmarcação).
