O Jquery Lazy Load é um plugin jQuery escrito em JavaScript. Ele atrasa o carregamento de imagens nas áreas não visíveis da página, e conforme o usuário vai rolando a tela para baixo as imagens vão sendo carregadas. Isso melhora consideravelmente o desempenho de sua página web, bem como a experiência do usuário.
Veja um exemplo em funcionamento.
Faça o download do arquivo jquery.lazyload.js.
Faça o upload deste arquivo para a pasta onde está localizado o seu site (por exemplo: /public_html/).
Antes de tudo, se você ainda não utiliza nenhum plugin em jQuery no seu website, é importante fazer a “chamada” dos códigos que compõem este maravilhoso sistema. Para isto, adicione estas linhas dentro do <head> </head> do seu site:
Agora que o seu website já está com o código do jQuery sendo importado via Google, é necessário adicionar a execução do plugin Lazy Load. Faça isto através do seguinte código, também inserido no <head> do seu website:
Ok! Agora ambos os códigos estão sendo carregados, tanto as instruções do jQuery, quanto as instruções do plugin. No entanto ainda há a necessidade de inserção de um código em javascript fundamental para a execução dos comandos de carregamento da página. Adicione as linhas de códigos abaixo dentro do <head>:
Este código fará com que todos os atributos “img”, ou seja, todas as imagens do seu site recebam a função “fadeIn” apenas quando o usuário executar a função .lazyload, que neste caso dá o comando para que a imagem seja carregada apenas quando ela aparecer na tela do usuário final.
Relacionados:
