Blog Internet-Formation

Conclusion

Voici les codes que vous pouvez télécharger (script et polyfill) ci-dessous, avec le détail du script Javascript utilisant l’API Intersection Observer juste en-dessous. Profitez bien… ;-)

Télécharger “lazy-loading.zip”lazy-loading.zip – Téléchargé 926 fois – 7,58 Ko

P.S. : je vais certainement créer un petit plugin WordPress utilisant cette technique, avec quelques options, etc. C’est déjà en cours de développement pour mon propre usage, je ne sais pas si je le sortirai « officiellement »…

// Polyfill pour forEach pour IE 8 à 11
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

// Fonction de préchargement d'image
function preloadImage(media) {
  var src = media.getAttribute('data-src');
  var srcset = media.getAttribute('data-srcset');
  if(!src) {
    return;
  }
  media.src = src;
  media.removeAttribute("data-src");

  if(!srcset) {
    return;
  }
  media.srcset = srcset;
  media.removeAttribute("data-srcset");
}

// Configuration de l'observer (optionnel)
var config = {
  rootMargin: '0px 0px 100px 0px',
  // threshold: 0  // Incompatible avec Safari, attention !
};

// Instanciation de l'intersectionObserver pour le lazy loading
var observer = new IntersectionObserver(function(entries, self) {
// Pour chaque entrée ciblée (les images ici)
entries.forEach(function(entry) {
    // L'API Javascript vérifie que l'entrée existe...
    if(entry.isIntersecting) {
      if((entry.target.tagName == "VIDEO" || entry.target.tagName == "AUDIO") && entry.target.children.length > 0) {
        for(var source in entry.target.children) {
          var mediaSource = entry.target.children[source];
          if(typeof mediaSource.tagName === "string" && mediaSource.tagName === "SOURCE") {
            // mediaSource.src = mediaSource.dataset.src;
            preloadImage(mediaSource);
            entry.target.load(); // Recharge l'élément média
            self.unobserve(mediaSource);
          }
        }
      } else {
        // Modifie la data-src en src avec une fonction preloadImage()
        preloadImage(entry.target);
      }

      // L'image est chargée, l'API peut s'arrêter jusqu'à la prochaine, etc.
      self.unobserve(entry.target);
    }
  });
}, config);

// Sélectionne les images et lance l'observer asynchrone
const medias = document.querySelectorAll('[data-src]');
medias.forEach(function(media) {
  // Observation des images à charger au fur et à mesure
  observer.POLL_INTERVAL = 100;
  observer.observe(media);
});

// Instanciation de l'intersectionObserver pour le lazy loading
var backgroundObserver = new IntersectionObserver(function(entries, self) {
  // Pour chaque entrée ciblée (les images ici)
  entries.forEach(function(entry) {
    // L'API Javascript vérifie que l'entrée existe...
    if(entry.isIntersecting) {
      // Suppression de la class originelle
      entry.target.classList.remove("bckg-media");

      // Ajoute une classe visible pour afficher la bonne image
      entry.target.classList.add("visible");

      // L'image est chargée, l'API peut s'arrêter jusqu'à la prochaine, etc.
      self.unobserve(entry.target);
    }
  });
}, config);

// Même travail pour les images en background
var bckgMedias = document.querySelectorAll('.bckg-media');
bckgMedias.forEach(function(media) {
  // Observation des images à charger au fur et à mesure
  backgroundObserver.POLL_INTERVAL = 100;
  backgroundObserver.observe(media);
});