Acelerar mi blog en blogger con Lazy Load

Que nuestro blog tenga una buena carga por cad visitante que nos lea es importante pues bien sabemos que a nadie le gusta un sitio lento y quedado en su carga desde el texto hasta las imágenes, por este motivo quiero enseñar hoy cómo optimizar un poco nuestros blogs con un script en JQUERY.

Lazy load images - Lazy Load poner en blog de blogger

El efecto lo pueden ver aquí en bloggin Red al notarse que las imágenes se precargan después de estar el sitio ya cargado, así que para poner esto en nuestros blogs haremos lo siguiente:

1. Nos dirigimos a Plantilla | Editar HTML y buscamos la etiqueta </head>  arriba de esta etiqueta pegamos lo siguiente:

<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/AVvXsEimb3rcuplrbdD9OBS4LvJH9zR7Zp8IwO8qpCEW8Q96am6Ww104nWPeNp3z-TfEuRkj-v9uKEMwi2MIteh7knJ_Tbwm1Cqqfe_ds2oliESdQEiPI_4q8VyGfvvx3dhk5CorWT9ZmRgluL4/s1/bg_placeholder.png'
});
});
//]]>
</script>

 Sólo queda guardar y estuvo.

Es importante saber que  se deja la versión más actual de JQUERY pues es la más estable, si en algún momento tiiene problemas con imágenes en los gadgets y quiere que se aplique a las imágenes sólo de las entradas entonces cambien lo que está en color rojo por lo siguiente:

$('.post img').lazyload({

Espero les sea de utilidad nos veremos en un próximo post.

Hasta la próxima...