Usar la técnica Lazy Load con Javascript para mejorar la carga de tu web

Este es un ejemplo básico de cómo hacer un lazy load de imágenes utilizando JavaScript.

CSS

.lazy {
  display: none;
}

HTML

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

Javascript

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

Este código utiliza la API IntersectionObserver para detectar cuando una imagen entra en el campo de visión del usuario. En ese momento, se cambia el valor de “src” del atributo de datos de la imagen al valor real de “src”, lo que hace que se cargue la imagen real. Además, se elimina la clase “lazy” de la imagen para que no se vuelva a cargar de forma perezosa en el futuro.

Si prefieres ahorrar algo de código puedes usar jQuery, aquí hay un artículo con el ejemplo para implementar Lazy Load con jQuery.