Haz tu blog más rápido con el Script Lazy Image Loading

¿No odias cuando los sitios web no se cargan rápido? Hay muchos factores pero las imágenes son uno de los factores más importantes que afectan la carga rápida de un sitio web. Para reducir el tiempo de carga de tu blog hoy te presento un script que permite que tus imágenes se carguen más rápido, y funciona en blogger.

Lazy Load Image es un plugin jQuery que sólo carga Imágenes visibles en el display (parte visible de la página web) mejorando así el tiempo de carga de página. Las imágenes que están fuera de la región visible inicial de la pantalla se cargan mientras los usuarios hacen scroll a través de la pantalla. 
Un plugin muy útil para los blogs que usan imágenes de manera intensiva. Este script realmente te ayuda a disminuir el 50 % de tiempo de carga de los blogs. Puedes revisar tu propio blog con Gtmetrics para ver el funcionamiento de este plugin.

¿Cómo puedes instalar este plugin para blogger?

    Ingresa para Blogger > Escritorio
    Haga clic en el menú desplegable y seleccione la plantilla
    Haz una copia de seguridad de la plantilla antes de hacer cambios a tu blog
    Ahora haz clic en Edición de HTML > Continuar
    Presiona Ctrl + F y busca el código que se muestra a continuación: 



¿Cómo puedes instalar este plugin para blogger?

    Ingresa para Blogger > Escritorio
    Haga clic en el menú desplegable y seleccione la plantilla
    Haz una copia de seguridad de la plantilla antes de hacer cambios a tu blog
    Ahora haz clic en Edición de HTML > Continuar
    Presiona Ctrl + F y busca el código que se muestra a continuación: </head>

Copiar y pegar el siguiente código antes de: </head>


<script type='text/javascript'>//<![CDATA[

(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.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);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnnUQLXvM50S3ZKuLGhMYEP5Kc91QIWw4J-dzc_G6o_osNg418-_Vs0QLffZlFjzy2K-75OPi55iXM8UBMXkZJBg_04c3Rx85j4fdyQOFvsBwHMW6EhsmimOlf1AutoZJS_ZEFbhyphenhyphenRH4s/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>



Ahora sólo tienes que pulsar en Guardar plantilla y actualizar tu blog. Ahora podrás desplazarte a tu blog y ver cómo tus imágenes van apareciendo con el efecto de “Lazy Image Loading”.