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.
La instalación es tan sencilla que sólo requiere un paso, y es que nos evitaremos alojar el script en algún servidor, ya que lo nos interesa es la velocidad, alojaremos el script directo en la plantilla.
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'> //<![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/AVvXsEhrQ2YH-IVc3iD4Bhjpn6Qt7YCjsjLws7TMs68JNDnoC8icc14UTHfiKKw5NtjLCK3J2sv8hF8AJBL4Guc887TgljHbe8muwKx4pM_HlhyphenhyphenLjflBroqi3K6rA8Mzgat9ezKD4diWtMPa1sA/s1/bg_placeholder.png' }); }); //]]> </script>
Guarda los cambios y listo.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
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.
Dipakai Bersama
Author : Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnologÃa e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. ,
No hay comentarios:
Publicar un comentario