Optimizar carga de las imágenes en Blogger

Sin duda cuando uno quiere, mas bien cuando uno crea un blog, en la plataforma de Blogger, una de las cosas que mas debemos tener en cuenta es que la carga de nuestro sitio, toda ayuda nos viene bien para optimizar la carga de nuestro blog, algo que los buscadores ocupan para posicionar nuestro blog de mejor manera.

Para optimizar las imágenes, en realidad lo que se hará es dejar las imágenes para que se carguen después, para que carguen solo cuando el usuario las vea, lo que mejora mucho la carga de nuestro blog, todo mediante un script, el cual se llama Lazy Load, para implementar es bien fácil, primero:

Vamos a la edición HTML de nuestra plantilla y antes de </Head> pegamos:

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

Con eso ya tenemos el efecto listo y no hay que hacer nada mas, un Truco simple pero muy efectivo en nuestra busca de optimizar nuestra pagina de manera sencilla..

Leave a comment

Your email address will not be published.


*


Follow

Get every new post delivered to your Inbox

Join other followers