Cómo agregar Lazy Load para imágenes en Blogger

Cómo agregar Lazy Load para imágenes en Blogger

Las imágenes hacen que nuestro blog sea atractivo y crea una muy buena impresión en nuestros blogs. Pero las imágenes a menudo cuentan y ocupan muchos espacios, lo que resulta en una carga lenta de nuestro sitio web.

Y si está utilizando una plataforma Blogger para bloguear como yo, entonces se vuelve muy difícil tener un complemento como el que tienen los usuarios de WordPress.

Mira También¿Cómo agregar una tabla de precios en Blogger utilizando Html y Css?

Es posible que haya pasado horas trabajando, tratando de reducir el tamaño y los bytes de sus imágenes, utilizando algún software u otros métodos en línea.

Entonces, en este tutorial, aprenderá cómo reducir el tiempo de carga de la página de su blog de Blogger y mejorarlo simplemente agregando un script JQuery en 2 pasos simples y sencillos.

Mira También¿Cómo crear un generador de contraseñas seguras en Blogger?
Índice de contenidos
  1. Beneficios de agregar Lazy Load
  2. Cómo agregar Lazy Load para imágenes en Blogger
  3. Conclusión para Blogger Image Lazy Loader

Beneficios de agregar Lazy Load

El uso de lazy Load hará que su contenido y otras partes importantes de su blog se carguen antes de que se carguen las imágenes. Así que, El flujo de la página de su sitio hace que aparezcan sus imágenes, pero se carga lentamente cuando se carga todo el contenido de la página.

Hace que su blog sea pesado con todas las imágenes precargadas y cargadas de imágenes que sus visitantes podrían no haber visto y, por lo tanto, su blog no necesita sufrir.

Mira TambiénCómo crear un HTML Parser Tools en Blogger

Hace que su sitio se cargue más rápido y, por lo tanto, impresiona a los motores de búsqueda como Google, Yahoo, etc.

Hace que el rendimiento de su sitio web aumente al reducir la tasa de rebote de su sitio.

Si su sitio es muy visual, el uso de Image Loader será especialmente útil.

Echa un vistazo aquí: lo que dice IIlya Grigoril, promotora de desarrolladores y gurú del rendimiento web de Google, sobre la optimización de imágenes. Entonces,

Cómo agregar Lazy Load para imágenes en Blogger

Siga los pasos simples y fáciles de entender a continuación y terminará en poco tiempo.

Paso 1: Inicie sesión en su Panel de control de Blogger y seleccione Plantilla/Tema y haga clic en Editar HTML .

Paso 2: Busque la etiqueta </head> y pegue el siguiente código justo antes de la etiqueta </head>.

<! -- Image Lazy Loader Script by Wonder Krish -->   

  <script type='text/javascript'>//<![CDATA[   

  (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.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);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>   

  <!-- wonderkrish.com -- >    

Nota: si ha deshabilitado su JavaScript en sus navegadores, no podrá ver las imágenes de sus publicaciones. Como la secuencia de comandos es solo para aumentar la velocidad de carga de la imagen de Blogger.

Conclusión para Blogger Image Lazy Loader

Como es totalmente un script JQuery, cuando sus visitantes se desplacen hacia abajo en su blog, las imágenes de su sitio se cargarán con hermosos efectos de animación uno tras otro.

Si este tutorial te ha ayudado en la optimización de las imágenes en tu blogger. O si ha encontrado alguna dificultad, puede dejar un comentario a continuación y me pondré en contacto con usted.

Felipe Arango

Siento una pasión desbordante por la ciencia y la tecnología, y disfruto enormemente plasmar mis pensamientos en palabras sobre estos temas. He dedicado muchos años a esta tarea, y no puedo imaginar un lugar mejor que miwebperfecta.com para expresar libremente mis instintos.

Ultimas Entradas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Usamos cookies para ofrecerte la mejor experiencia en nuestra web. Haciendo clic en “Aceptar” das tu consentimiento para usar estas cookies. Más información