JavaScript Academy · Leçon

Observer la visibilité des éléments

Créez un observateur et surveillez les éléments.

Observer la visibilité des éléments est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Pourquoi utiliser l’observation des intersections ?

Traditionnellement, détecter l’entrée d’un élément dans la fenêtre d’affichage nécessitait d’écouter scroll et d’appeler constamment getBoundingClientRect, ce qui est lent et saccadé.

L’API d’observation des intersections surveille efficacement et de manière asynchrone la visibilité, sans utiliser le thread principal.

Créer un observateur

Vous créez un observateur avec new IntersectionObserver(callback). Le rappel s’exécute chaque fois que la visibilité d’un élément surveillé franchit un seuil.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Observer un élément

Appelez observer.observe(element) pour commencer à surveiller une cible. Un seul observateur peut surveiller plusieurs éléments.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

L’indicateur isIntersecting

Chaque entrée possède un booléen isIntersecting qui vous indique si la cible chevauche actuellement la racine (la fenêtre d’affichage par défaut).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Détails d’une entrée

Chaque IntersectionObserverEntry contient des informations utiles :

target — l’élément observé
isIntersecting — indique s’il chevauche la racine
intersectionRatio — la proportion visible (de 0 à 1)
boundingClientRect — le rectangle de la cible

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

L’option threshold

L’option threshold détermine pour quels taux de visibilité la fonction de rappel est déclenchée. 0 se déclenche dès qu’un pixel est visible ; 1 se déclenche uniquement lorsque l’élément est entièrement visible.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

L’option root

Par défaut, l’observateur mesure par rapport à la zone d’affichage du navigateur. Définissez root sur un élément ancêtre avec défilement pour mesurer la visibilité à l’intérieur de ce conteneur.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

L’option rootMargin

rootMargin agrandit ou réduit le cadre englobant de root, comme les marges CSS. Les valeurs positives déclenchent la fonction de rappel plus tôt, avant que l’élément ne soit réellement à l’écran.

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Arrêter l’observation

Appelez observer.unobserve(element) pour cesser d’observer un élément, ou observer.disconnect() pour cesser de tous les observer. Cela est important pour le nettoyage et les déclenchements uniques.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Pourquoi cette méthode est efficace

Le navigateur calcule les intersections en interne et regroupe les notifications, au lieu d’exécuter votre JavaScript à chaque image du défilement. Cela évite les recalculs incessants de la mise en page et maintient un défilement fluide, même avec de nombreuses cibles.

Cas d’utilisation courants

L’observateur d’intersections permet de nombreuses fonctionnalités concrètes :

Chargement différé des images et des cadres intégrés
Défilement infini
Animations déclenchées par le défilement
Suivi des impressions publicitaires ou du contenu

Nous allons ensuite en créer plusieurs.

Vérification rapide

Vérifiez votre compréhension des notions de base de l’observateur d’intersections.

Récapitulatif

Vous avez appris les notions de base de l’observateur d’intersections :

new IntersectionObserver(callback, options) en crée un.
observe commence l’observation ; unobserve/disconnect l’arrêtent.
Chaque entrée expose isIntersecting et intersectionRatio.
threshold, root et rootMargin permettent de régler le moment du déclenchement.
Il est bien plus efficace que les écouteurs de défilement.

Ensuite, nous chargerons les images de façon différée avec cet outil.

Questions Fréquemment Posées

La leçon « Observer la visibilité des éléments » est-elle gratuite ?

Oui — le texte complet de « Observer la visibilité des éléments » 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 « Observer la visibilité des éléments » ?

Créez un observateur et surveillez les éléments. 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 1 sur 4.

Combien de temps prend la leçon « Observer la visibilité des éléments » ?

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

Observer la visibilité des éléments
Chargement différé des images
Défilement infini
Animations déclenchées par le défilement

← Retour à JavaScript Academy