Acelerar la carga de mi blog en blogger con Lazy Load (Precarga imágenes con Jquery)


Que nuestro blog tenga una buena carga por cada 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:'http://lh3.googleusercontent.com/-9nuRfZdo5ro/T5cYmFT_X9I/AAAAAAAACa8/K9aG-gcgsaI/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...

6 comentarios:

  1. El código debe ser implementado entre las etiquetas body, ya que la mayoría de las imágenes están implementadas allí.

    ResponderBorrar
    Respuestas
    1. Sí así es bien dices la mayoría ya que hay otras que no se alojan como base allí..

      Saludos,

      Borrar
  2. hola me funciona perfectamente, pase de 63% a 70% en velocidad de carga. mil gracias

    ResponderBorrar
    Respuestas
    1. Hola Mark un saludo,

      me alegra que te sirva y mejore la carga de tu sitio...

      Saludos,

      Borrar
  3. Respuestas
    1. HOla Lenny, este post es ya muy viejo de por sí y blogger hace poco actualizó toda la plataforma, ¿Cuál problema tienes?

      Borrar

ESTAMOS EN: