Mejora la velocidad de carga de tu sitio web con la técnica Lazy Load de imágenes en jQuery

Para implementar la técnica de Lazy Load de imágenes con jQuery, se puede utilizar el siguiente código:

HTML

<img class="lazy" data-src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">

CSS

.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
.lazy.loaded {
  opacity: 1;
}

jQuery

$(document).ready(function() {
  $(window).on('load scroll', function() {
    $('.lazy').each(function() {
      if ($(this).offset().top <= $(window).scrollTop() + $(window).height()) {
        var imgSrc = $(this).attr('data-src');
        $(this).attr('src', imgSrc);
        $(this).addClass('loaded');
      }
    });
  });
});

En este código, se agrega la clase “lazy” a las imágenes que se quieren cargar perezosamente, y se utiliza el atributo “data-src” en lugar de “src” para especificar la ruta de la imagen. En el CSS, se establece la opacidad en cero y se agrega una transición para que la imagen aparezca suavemente una vez cargada. También se agrega una clase “loaded” una vez que la imagen se ha cargado.

En el script de jQuery, se utiliza el evento “load scroll” para detectar cuando el usuario ha desplazado la página. Para cada imagen con la clase “lazy”, se comprueba si está en la vista del usuario. Si es así, se obtiene la ruta de la imagen del atributo “data-src”, se establece como el valor de “src” y se agrega la clase “loaded”.

Con este código, las imágenes se cargarán solo cuando estén en la vista del usuario, lo que reduce el tiempo de carga de la página y mejora la experiencia del usuario.