Lazy Load es un script de jQuery que ayuda a agilizar la carga del blog cuando en él se usan muchas imágenes, esto es porque el script detiene la carga de las imágenes, o sea que, las pone en modo de espera para que primero carguen los demás elementos, y conforme se baje el scroll de la página irán apareciendo las imágenes.
Esto supone una mejora de velocidad en la carga del blog, sobre todo cuando en él hay imágenes muy grandes o una cantidad significativa de imágenes.
Además, usaremos el efecto FadeIn para que cuando las imágenes aparezcan lo hagan en forma de desvanecimiento.
Puedes ver un ejemplo en
este blog de pruebas, si bajas el scroll poco a poco irás viendo cómo las imágenes van apareciendo.
Para poner Lazy Load en tu blog ingresa en la Edición HTML de la plantilla y antes de </head>pega el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<;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/AVvXsEjhqBqA-nICSOYJyzQGiXTC8VxefO2vedjDDdt4HKOSmH-Pil2Qtc6WkFjcb2n1kUwdhwZ8IKGC7VbDWu5ewagyQ_o4y_uFnzjYnQnpjYJXlj7Vbq87FmZ_mzlyhDTUrCKt1vjrUgBMIXM/s1/gris.gif'
});
});
//]]>
</script>
Guarda los cambios y listo.Si ya tuvieras jQuery deja sólo la versión más actual.
Como puedes ver el script no es tan extenso en comparación de otros que usamos con frecuencia, agilizará la carga del blog, y además aparecerá las imágenes con efecto de desvanecimiento.
Sin embargo, sólo se recomienda su uso cuando el blog contiene muchas imágenes, de los contrario no tiene caso llenar el blog con otro script ya que además no representará una mejora sustancial ni el el tiempo de carga ni en el tamaño de la página.
-Gracias a Ciudad Blogger
