Acelere o carregamento do blog com Lazy Load

Lazy Load é um script jQuery que ajuda a acelerar o carregamento do blog

Lazy Load é um script jQuery que ajuda a acelerar o carregamento do blog quando ele usa muitas imagens, isso ocorre porque o script pára o carregamento das imagens, ou seja, coloca os em modo de espera para que primeiro carreguem os outros elementos, e conforme se baixe o scroll da página as imagens irão aparecendo.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

Isto implica uma melhoria de velocidade no carregamento do blog, especialmente quando nele há imagens grandes ou uma quantidade significativa de imagens.

Além disso, usaremos o efeito FadeIn de modo que as imagens apareçam em forma de desvanecimento.

Você pode ver um exemplo neste blog teste, se você baixar o scroll pouco a pouco verá como as imagens irão aparecendo.

A instalação é tão simples que exige apenas uma etapa, e evitamos hospedar o script em um servidor, porque o que nos interessa é a velocidade, alojaremos o script diretamente no modelo.

Para colocar Lazy Load em seu blog entre no Editar HTML do modelo e antes de </head> cole o script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

/*

* Lazy Load - jQuery plugin for lazy loading images

* Copyright (c) 2007-2012 Mika Tuupola

* Licensed under the MIT license:

* http://www.opensource.org/licenses/mit-license.php

* Project home:

* http://www.appelsiini.net/projects/lazyload

*/

(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}

var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}

this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}

if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}

self.loaded=false;}else{self.loaded=true;}

$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))

[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}

return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}

return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}

return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}

return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

$(document).ready(function($){

$('img').lazyload({

effect:'fadeIn',

placeholder:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFaWI69urbUNgrw0KOHVZxEeEZ9K9mSC7lxUvbFpnEKVXI4dJoVDEIMXAOvP1cxEztc7dYJOz_i6Ud0o97b67Y69s-k1P0upGUkeo3rM3l0ZX38sNvhTQ-1rQ8IDjRMlyv8554Yt_Afqo/s1/gris.gif'

});

});

//]]>

</script>

Salve as alterações e pronto.

Se você já usar jQuery utilize apenas a versão mais atual.

Como você pode ver o script não é tão extenso em comparação com outros que utilizamos com freqüência, ele acelera o carregamento do blog e também exibe as imagens com efeito de desvanecimento. 
No entanto, somente é recomendado para uso quando o blog contém muitas imagens, caso contrário não adianta encher o blog com outro script, pois não irá representar uma melhoria substancial nem no tempo de carregamento e nem no tamanho da página.