O Desenvolvedor

Veja a página oficial do Lazy Load.

[changelog]

Saiu a nova versão do Lazy Load, veja o changelog completo da nova versão.

Visite o Github do projeto.

v1.0

• Funciona sem classes
• Otimização de performance – imagens já carregadas são arrancadas do array e não são mais percorridas

v0.5

• Só funciona com seletor de classes nas imagens

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. 🙂

[/changelog]

 

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 😀

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