Conversando com o Rafael Cavalcante sexta ele me lembrou que eu ainda devia melhorias para aplicar no jQuery Lazy Load Plugin.
Comecei sexta e testei hoje, está tudo no Github.
jQuery Lazy Load Changelog
- Melhoria de performance
- Não precisa mais de classe para trabalhar
Changelog detalhado:
Devido as preocupações com performance de javascript mudei um pouco forma como o plugin trabalha.
Com o uso do grep no lugar do each, o jQuery Lazy Load está agora removendo do seu array todas as imagens que já for carregadas. Elas não são percorridas repetidamente (como acontecia na versão 0.5) e a performance melhorou bastante por conta disso.
Também por conta desta nova forma de trabalhar com o array não é mais necessário o uso de classe (a classe era utilizada para verificar se uma imagem já havia sido carregada). Como preciso manipular menos o DOM também houve ganho de performance por conta disso.
Como usar o jQuery Lazy Load
Baixa a última versão do plugin no Github.
Chamando os scripts
Chame o jQuery e o jQuery Lazy Load plugin na sua página.
Preparando as imagens
As imagens que utilizarão o lazy load devem ter a tag data-src com o valor da url da imagem que deverá ser carregada no conteúdo.
Uma dica é chamar o src das imagens para uma imagem transparente e sempre estipular a largura e altura da imagem no próprio HTML, assim sua página vai renderizar mais rápido pois você irá reduzir o reflow do browser.
Outra dica é através de CSS colocar uma imagem de loader como background das imagens que utilizarão o plugin de lazy load, assim se as imagens demorarem para carregar seu usuário terá uma experiência melhor e saberá que algo está acontecendo.
Iniciando o Lazy Load
Por último, é só iniciar o plugin com o seletor das imagens que irão utilizar o plugin:
$(function() {
$('.lazy').lazyLoad();
});
Pronto, agora seus usuários só carregarão imagens quando necessário.