TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN

Acelerar la carga de nuestro blog

Lazy load es un scrip de JQuery con el cual agilizaremos la carga de nuestro blog de blogger de manera significativa, cuando en él haya alojadas muchas imágenes o gadgets.
Si tenemos muchas imágenes en nuestro blog nos habremos dado cuenta que tardan en cargar, con este script lo que hace es que se van cargando según se vaya bajando el scroll de la página, ademas añade un efecto para que según vayan apareciendo lo hagan en forma de desvanecimiento.
Entraremos en el diseño de nuestra plantilla, edición HTML, buscamos la instrucción </head> y justo antes de la misma agregamos el siguiente código:


<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>

Y eso es todo, guardamos nuestra plantilla, no sin antes previsualizar por si algo se hizo mal.

4 comentarios:

  1. Hola Luz.

    El script es de un plugin. Recomiendo verificar la compatibilidad antes de instalarlo o puedes tener problemas. Por lo que he visto, no es compatible con la última versión de WordPress.

    Saludos

    ResponderEliminar
  2. Victor, lo siento olvidé mencionar en el post que es para los blogs de Blogger.

    ResponderEliminar
  3. mmm probe este script pero la pagina cargó mas lento.. incluso, probe con GTMetrx, y antes de aplicarlo, el sitio cargaba en 3.08 s; despues de aplicarlo, tardaba 4.96 s ......

    Pero de todas formas, gracias.

    ResponderEliminar
    Respuestas
    1. Pues a mi si me funciona bien, a lo mejor se debe al navegador que se use.

      Eliminar

Entradas populares

Colaboro En:

textoalternativo textoalternativo textoalternativo

Atención

Los comentarios serán publicados una vez hayan sido moderados, disculpen las molestias.

Este blog es informativo y de caracter educativo, el administrador del mismo no se responsabiliza del uso fraudulento o ilegal que otras personas hagan del contenido publicado en él.

Así mismo si alguien cree que se vulnera algún derecho se ruega ponerlo en conocimiento para que se subsane de forma inmediata.