Mettre en place le Lazy Load sur vos images et vidéos

Apprenez à mettre en place le Lazy Load sur vos images et vidéos en javascript
Mis à jour le 13/07/2023

Les images et les vidéos alourdissent considérablement le temps de chargement d'une page web. Pour éviter qu'une page web soit trop longue à charger et pour améliorer le référencement, il est important de mettre en place le Lazy Loading.

Le Lazy Loading (le chargement paresseux si on traduit en français) est une méthode qui permet de charger les images et les vidéos au fur et à mesure du scroll. Ainsi, seules les images ou vidéos visibles à l'écran sont chargées. Voici comment mettre en place le Lazy Loading facilement.

La méthode présentée ci-dessous est une méthode moderne recommandée par Google. Elle utilise l'API Intersection Observer et est compatible avec la totalité des navigateurs modernes.

Lazy Loading pour les images

Ajuster le code

Nous allons prendre un exemple simple. Admettons que vos images sont sous la forme suivante : 

    <img src="image.png" alt="Je suis une image">

Il est nécessaire de transformer le code de la manière suivante : 

    <img class="lazy" src="image-temporaire.png" data-src="image-finale.png" alt="Je suis une image">

Explications :

  • class="lazy" : cette classe permettra de sélectionner les images qui doivent être chargées en Lazy Loading, vous pouvez bien entendu choisir un autre nom
  • src="image-temporaire.png" : cet attribut est obligatoire, mais puisque nous ne voulons pas charger directement notre image, il suffit de remplacer l'image finale par une image temporaire qu'on mettra sur toutes les images à charger en Lazy Load. Vous pouvez également créer une image transparente de 1×1px pour optimiser davantage le temps de chargement
  • data-src="image-finale.png" : permet de stocker l'URL de l'image finale pour la récupérer ensuite avec le Javascript

Charger les images avec Javascript

Une fois que vous avez adapté le code de vos images, il suffit d'ajouter un petit script pour terminer le travail. Ce script peut être placé dans la partie <head></head> de votre page. 

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

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

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // facultatif : vous pouvez ajouter ici d'autres méthodes de détection pour les navigateurs moins modernes
  }
});

Ce script permet de détecter les images qui sont présentes dans la fenêtre. Lorsque c'est le cas le script récupère l'URL présente dans data-src et la met dans l'attribut src pour que les images se chargent. Le script supprime ensuite la classe "lazy" des images qui ont été chargées pour éviter qu'elles ne soient chargées plusieurs fois.

Lazy Loading pour les vidéos

La fin de cette page est en cours de rédaction