Lazy Load de imagens com jQuery

Um recurso muito interessante que pode agilizar o carregamento da página é somente carregar do servidor as imagens quando o usuário as visualizar. Esta técnica é conhecida como Lazy Load e o existe um plugin jQuery para fazer isso Lazy Load Plugin for jQuery que é bastante simples.

** Primeiramente inclua as bibliotecas jQuery e Lazy Load Plugin for jQuery:

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>

A ideia é que quando a página for carregada as imagens do site irão carregar uma imagem pequena na marcação img e quando a marcação img realmente aparecer o javascript irá carregar a imagem correta, então deve colocar a imagem padrão pequena no atributo src e a imagem a ser carregada no data-original, lembrando ainda que como a imagem que carregará por padrão é pequena(tipicamente uma 10×10) se faz necessário colocar o tamanho da imagem “real” nos atributos width e height para evitar redimensionamento ao rolar a página.

<img class="lazy" src="img/grey.gif" data-original="img/imagem_grande01.jpg" width="600" height="600">

** Agora que já temos a imagem é só iniciar o plugin.

$(document).ready(function(){

    $(".lazy").lazyload();

});

** Também é possível colocar um efeito de fadeIn para fazer a transição para aparecer a imagem.

$(document).ready(function(){

    $(".lazy").lazyload({effect : "fadeIn"});

});

Segue um exemplo utilizando imagens do Instagram

Fonte : http://www.botecodigital.info/jquery/lazy-load-de-imagens-com-jquery/