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"});
});