Como Implementar Lazy load

O que é Lazy Load?

Lazy loading é uma técnica de otimização que permite o carregamento de dados somente quando estes forem necessários. É uma ótima técnica que você deve considerar se os conteúdos incluem muitos videos e imagens de alta resolução.

Como funciona?

• O navegador constrói o Modelo de Objeto de Documento (DOM) da página da web, sem fazer o download das imagens e vídeos.
• O JavaScript é usado para determinar quais imagens baixar e quais vídeos fazer o pré-download, com base no conteúdo que está inicialmente visível quando a página carrega.
• O download e a renderização de vídeos adicionais não são feitos até o usuário do site descer a página e o conteúdo adicional aparecer na tela.

O resultado final é que as imagens e os vídeos não são carregados até que seja realmente necessário. Isso pode proporcionar uma melhoria significativa no desempenho do site.

Como implementar ?

Existem varias formas de implementação, abaixo contém um exemplo de uso básico onde é usando o próprio plugin Lazy do Jquery de forma rápida, prática e de fácil entendimento.

1 º passo – Instalação

Primeiramente será necessário uma cópia do Jquery para poder usar o Lazy em seu projeto.
– Faça o download e salve um dos dois arquivos disponíveis para incluir o Lazy em sua página, seja o desenvolvimento ou a versão minificada ao lado do jQuery.

– Você também pode instalar com bower ou npm .

2 º passo – Colocar o URL da imagem em um atributo diferente de src.

Fazendo que o navegador não acione o carregamento da imagem.

3º passo – Precisamos informar o navegador quando carregar a imagem.

Para isso utilizaremos a seguinte função:

Por padrão, o plugin espera que a imagem seja totalmente carregada e chamada show(). Você pode usar qualquer efeito desejado. No exemplo utilizamos o efeito ‘fadeIn’.

E também por padrão, as imagens são carregadas quando aparecem na tela.  Para visualizar a animação do efeito corretamente, você deve definir o limite como zero. Caso contrário, os efeitos começam fora da vista. Ou por exemplo definir limite para 200 faz com que a imagem carregue 200 pixels antes de aparecer na viewport.

4º e ultimo passo, você deve definir as dimensões da imagem

Como width e height atributos ou em CSS. Caso contrário, o plug-in pode não funcionar corretamente.

Conclusão

O Lazy Loading, se implementado corretamente, melhorará significativamente o desempenho de carregamento de suas páginas da Web, reduzirá o tamanho da página e os custos de entrega ao reduzir os recursos desnecessários carregados na frente, mantendo o conteúdo necessário intacto na página. Com páginas de carregamento mais rápidas, há uma ótima experiência do usuário, algo que seus visitantes adorariam.

Então, o que você está esperando? Comece a utilizar o
Lazy Loading com imagens de carregamento lento agora!