jQuery Lazy Load: Carregue as imagens do seu site apenas quando for necessário

Speed

website-speed-600x230

Hoje em dia, ter um site que ofereça um tempo de carregamento baixo não é mais algo restrito a grande projetos e sim uma obrigação de todos. O grande vilão, responsável na maioria das vezes pelo tempo de carregamento excessivo, são as imagens, devido principalmente a utilização de imagens sem nenhum tratamento apropriado para web, em sua grande maioria em sites dinâmicos, onde o responsável pelas publicações nem sempre tem conhecimento do impacto que uma imagem inadequada para web pode causar na performance do site.

Sendo assim, a cada dia novas técnicas são empregadas para que essa situação seja contornada, dentre elas se destaca o jquery lazy load. O plugin, atua de forma; que as imagens só seja carregadas quando estas tiverem em foco na área de visualização do navegador.

Benefícios ao utilizar jquery lazy load

O principal benefício em utilizar o plugin está relacionado a performance do site, como as imagens só são carregadas quando estiverem na área de visualização do browser, evita que o navegador carregue todas imagens utilizadas no seu site no momento em que a página é carregada, fazendo apenas requisições quando forem necessárias, veja nesse post os benefícios de possuir um site otimizado de Sergio Lopes.

Outro ponto importante, está nos sites que utilizam clould/cdn, onde estes serviços geralmente cobram pela transferência de dados na rede, sendo assim, carregando somente o necessário, você conseguirá reduzir os gastos.

Utilização do plugin

Antes de mais nada,  precisamos baixar o plugin e inclui-lo na página onde iremos utilizar. Lembrando que este plugin depende do jquery, portanto, tenha certeza que já possui no seu projeto.

Após inclusão do plugin iremos modificar as imagens no qual o plugin atuará.

Na exemplo logo acima, observamos que existe uma atributo adicional chamado data-original, é nesse atributo que deve ficar a referência para imagem original que só será exibida no momento em que o plugin achar necessário, já no atributo src devemos substituir por uma imagem alternativa (Imagem padrão, carregando e etc). Uma pratica comum utilizada pelos desenvolvedores, é criar uma imagem contendo apenas 1×1(px) transparente, afim de não ficar aquele icone padrão do navegador, utilizado quando uma imagem não foi encontrada.

Agora nos resta fazer o plugin trabalhar, neste caso basta chamar a função lazyload() no seletor jquery das imagens, onde queremos que o carregamento preguiçoso seja aplicado.

Também podemos atribuir parâmetros adicionais ao jquery lazy load, customizando a sua exibição.

Veja o demo do efeito fadeIn, para mais opções, consulte a página do projeto.

jQuery Lazy Load e ajax

Um problema comum encontrado por alguns desenvolvedores é utilizar o plugin em conteúdo carregado por ajax, sem precisar instanciar o método lazyload a cada callback da requisição.

Uma solução seria remover a classe das imagens que já foram carregadas pelo plugin e aciona-lo sempre que uma nova requisição for finalizada, para isso utilizaremos o seguinte código:

😀