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!