0Pricing
JavaScript Academy · Leçon

Chargement différé des images

Chargez les images uniquement lorsqu’elles apparaissent.

Chargement différé des images est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Le principe du chargement différé

Le chargement différé reporte le téléchargement des images jusqu’à ce qu’elles soient sur le point d’entrer dans la zone visible lors du défilement. Cela économise de la bande passante et accélère le chargement initial de la page, en particulier pour les pages longues contenant beaucoup d’images.

Stocker l’URL réelle

L’astuce consiste à ne pas placer initialement l’URL réelle de l’image dans src. Stockez-la dans un attribut data-src afin que le navigateur ne la télécharge pas tout de suite.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

Sélectionner les images à chargement différé

Rassemblez toutes les images qui nécessitent un chargement différé. Une convention courante consiste à utiliser une classe commune ou la présence de data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

Créer l’observateur

Créez un observateur dont la fonction de rappel charge l’image réelle dès qu’elle entre en intersection. Utilisez rootMargin afin que l’image commence à se charger légèrement avant d’apparaître.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

Charger lors d’une intersection

Lorsqu’une image entre en intersection, copiez son data-src dans src. Le navigateur la télécharge alors et l’affiche.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

Ne plus observer après le chargement

Une fois chargée, une image n’a plus besoin d’être observée. Appelez unobserve pour libérer des ressources et empêcher un nouveau déclenchement.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

Commencer l’observation

Parcourez toutes les images à chargement différé et commencez à les observer. L’observateur s’occupe du reste pendant que l’utilisateur fait défiler la page.

lazyImages.forEach(img => observer.observe(img));

Afficher un espace réservé

Offrez une expérience fluide en affichant un petit espace réservé flou ou une couleur unie pendant le chargement de l’image réelle, puis faites-la apparaître progressivement lors de l’événement load de l’image.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

L’attribut loading natif

Les navigateurs modernes prennent également en charge le chargement différé natif via loading="lazy" sur img et iframe. L’observateur d’intersections reste utile pour bénéficier d’un contrôle personnalisé, créer des animations ou prévoir un comportement de secours.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

Nettoyer l’attribut data-src

Après le chargement, vous pouvez supprimer l’attribut data-src afin de garder le DOM propre et d’éviter toute confusion dans le code ou les requêtes ultérieurs.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

Le modèle complet

Le chargement différé avec l’observateur d’intersections est un modèle propre et efficace : stockez les URL dans data-src, observez chaque image, remplacez l’URL par l’URL réelle lors de l’intersection, puis cessez de l’observer. Vous obtenez ainsi une page plus rapide qui charge les images juste à temps.

Vérification rapide

Vérifiez votre compréhension du chargement différé des images.

Récapitulatif

Vous avez créé un chargement différé des images :

  • Stockez l’URL réelle dans data-src.
  • Observez chaque image avec un observateur d’intersections.
  • Lors de l’intersection, copiez data-src dans src, puis utilisez unobserve.
  • Utilisez rootMargin pour précharger l’image juste avant qu’elle soit visible.
  • loading="lazy" natif constitue une solution plus simple.

Ensuite, nous mettrons en œuvre le défilement infini.

Questions Fréquemment Posées

La leçon « Chargement différé des images » est-elle gratuite ?

Oui — le texte complet de « Chargement différé des images » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Chargement différé des images » ?

Chargez les images uniquement lorsqu’elles apparaissent. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Chargement différé des images » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Observer la visibilité des éléments
  2. Chargement différé des images
  3. Défilement infini
  4. Animations déclenchées par le défilement
← Retour à JavaScript Academy