Jquery.. Lazy Load: Acelera tu Blog....

De seguro llegas acá porque como yo llevas un blog con cientos de fotos y vídeos que están haciendo que la carga en el navegador sea cada día mas lenta.

El Script de Jquery, el Lazy Load agiliza el proceso de carga colocandolas en proceso de espera y a medida que el lector avanza en el portal, estas aparecen desvaneciéndose poco a poco usando el efecto FadeIn.

Para ello debes ir a tu cuenta en el caso de Blogger a Diseño a Edición HTML de la plantilla sin olvidarnos antes respaldarla y buscar la etiqueta </head>.  Justo antes de esta etiqueta de cierre debemos pegar el Script que podemos descargar desde  http://www.appelsiini.net/projects/lazyload ó usar el que esta adjunto mas abajo.

Script:

<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/AVvXsEibTgYHgIbwq6NjhLODqVu1kQI6XXU3IJBqugTJtZbawpmtjPZjNhL9qOioREJXjVsOrr0MtIp4Bix6UTYC67_C-gm9-WstGq4-PTfZm4MFTJMnrVQFp9vnrZX5TXfvuHjaE0e6nfkcugA/s1/bg_placeholder.png'
});
});
//]]>
</script>

Inmediatamente se procede a guardas los cambios y podemos observar instantáneamente al recargar los cambios en la pagina.

Según mi experiencia y desde la propia documentación lo mejor es pegar directamente en la plantilla el Script para agilizar su ejecución.

Ahora este Blogger es mas ágil en su carga sobre todo en conexiones lentas.

Fuentes:


http://www.appelsiini.net/projects/lazyload

http://ciudadblogger.com/2012/04/agregar-lazy-load-en-blogger-para.html

http://archive.plugins.jquery.com/project/lazyload


http://adeshoras.wordpress.com/2008/04/20/el-patron-de-diseno-lazy-loading/