Lazy Load en Blogger | LazyLoad | Como hacerlo

"La carga diferida (en inglés lazy loading) es un patrón de diseño comúnmente usado en la programación informática que consiste en retrasar la carga o inicialización de un objeto hasta el mismo momento de su utilización. Esto contribuye a la eficiencia de los programas, evitando la precarga de objetos que podrían no llegar a utilizarse. El opuesto de la carga diferida es la carga previa, precarga o eager loading."
La carga de imagenes con Lazy Load permite que el sitio web se cargue mucho más rápido ya que cargará solo lo que el usuario esta viendo en ese momento y conforme continue por el sitio se iran cargando sucesivamente.

La velocidad aumentará y tus lectores verán una mejora sustancial solo tienes que usar el siguiente código por supuesto asegurate de tener jQuery así que busca en el html "Ctrl+F" pero igual te dejo aquí como debería quedar asegurate de ponerlo entre la etiqueta "head"

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
<script async='async' 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
    */
    waitjQuery();

    function waitjQuery() {
      if (typeof jQuery === 'undefined') {
          setTimeout(waitjQuery, 100);
          return;
      }
      (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) {
                          $("").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/AVvXsEhWxyD5mr9OGRpH-5ub9sUx8e34tVXaxYw7foQb9Q1AVaZV_qOTqHtTQEmkXiZ3GMVZrrd9n0_evFDlEO7yBWZ0eIcmTcPonuzLMYZFg9ldLNMfJFD9TufvdHFdNKQ2lzFMWMX7bhkWEJQ/s1/bg_placeholder.png'
          });
      });
    }
    //]]>
</script>

Comentarios

Entradas populares de este blog

Paginación de Memoria

Principales herramientas del Banco Central del Ecuador para reducir la oferta de dinero