Lazy Load com jQuery [update]

[update]

Apliquei uma melhoria de performance no plugin (para não varrer repetidamente os elementos), ainda não consegui subir no Fiddle. Farei isso este final de semana e também vou documentar melhor o que ele faz para que mais pessoas possam contribuir com melhorias. :)

[/update]

Esta semana estava trabalhando em otimizações para a recém lançada home do iG e resolvemos aplicar o lazy load para melhorar ainda mais a experiência do usuário.

O que é Lazy Load?

Lazy load (ou "carregamento preguiçoso") é uma técnica de otimização de front-end que torna o carregamento inicial de uma página mais veloz inibindo o carregamento de imagens que não estão visíveis para o usuário.

Em páginas com uma altura grande e com uma quantidade alta de imagens razoável a técnica torna o carregamento muito mais veloz, e a medida que o usuário desce o scroll da página as imagens são carregadas para serem exibidas conforme a demanda.

A experiência do usuário é melhor pois a página é renderizada de forma mais rápidas, a fila de requisições é cortada portanto CSS e javascript são carregados e executados com menos tempo, e como acabei de ler As Leis da Simplicidade posso afirmar: reduzir tempo é um dos "processos de simplicidade" com o qual nós desenvolvedores devemos nos preocupar muito!

Mais um plugin de Lazy Load?

Tive a oportunidade de participar de todos os processos de desenvolvimento da nova home do iG e como estou pilhado em otimização nos últimos meses gostei muito da oportunidade de implementar otimizações após o lançamento. Dentre as otimizações aplicadas até agora uma das mais significativas no lado do usuário foi o Lazy Load.

Ps: até onde pesquisei o iG é o primeiro portal brasileiro a implementar a técnica :D

Busquei diversas alternativas prontas e fiz vários testes, mas conclui que é impossível executar com sucesso o lazy load se o html for escrito com o link da imagem no atributo src.

os navegadores modernos (Chrome e Firefox, que consegui testar perfeitamente isso) na leitura inicial do DOM já identificam os links das imagens e adicionam na fila de requisições. Os plugins davam o efeito visual e até faziam uma nova requisição da imagem, sem nenhum efeito positivo para performance.

Plugin jQuery Lazy Load

A solução para realmente não carregar as imagens é não colocar o source da imagem no atributo src, para isso utilize uma imagem já carregada uma imagem transparente.

Para acessar a versão mais atualizada do plugin acess este fiddle.

jQuery Lazy Load

Adicione o plugin a sua página, necessita de jQuery (testado com v1.4.4)

/* lazyLoad */
(function($){
$.fn.lazyLoad = function() {
   var images = this,
       classe = this.selector.replace('.','');
   showVisible();
   $(window).scroll(function(){ showVisible(); })
   function showVisible(){
      images.each(function(){
         var img = $(this);
         if(img.hasClass(classe)){
            var imgTop = img.offset().top, wTop = $(window).scrollTop() + $(window).height() + 100;
            if(wTop > imgTop){ 
               img.removeClass(classe).attr('src', img.data('src')).fadeIn();
            } 
         }
      })
   }
};
})( jQuery );

Iniciando o plugin

Como a regra dos bons plugins manda, a inicialização do plugin é extremamente simples e o seletor deve ser uma classe que deve ser aplicada em todas as imagens que irão utilizar a técnica:

$('.lazy-load').lazyLoad();

O Html

O plugin utiliza o atributo data do HTML 5, portanto o HTML de todas as imagens que utilizam devem ficar da seguinte forma:

< img data-src="url-real-da-imagem" height="100" src="url-de-imagem-de-1px-transparente" width="100" / >

Testado em:

• IE 7, 8, 9
• Firefox
• Chrome
• Safari