JavaScript Academy · Leçon

Défilement infini

Chargez davantage de contenu pendant le défilement de l’utilisateur.

Défilement infini est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Qu’est-ce que le défilement infini ?

Le défilement infini charge automatiquement davantage de contenu lorsque l’utilisateur s’approche du bas d’une liste, au lieu d’exiger un clic sur le bouton Page suivante. Les fils d’actualité des réseaux sociaux et les résultats de recherche l’utilisent couramment.

Le modèle du sentinel

La technique la plus propre utilise un sentinel : un élément vide placé à la fin de la liste. Lorsque le sentinel devient visible lors du défilement, récupérez et ajoutez le lot suivant.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

Observer le sentinel

Faites pointer un observateur d’intersections vers le sentinel. Comme celui-ci se trouve après le dernier élément, sa visibilité signifie que l’utilisateur a atteint la fin.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

Déclencher un chargement

Dans la fonction de rappel, vérifiez isIntersecting. Lorsque sa valeur est vraie, chargez la page de données suivante.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

Suivre la page

Conservez un compteur de pages afin que chaque chargement récupère la tranche suivante. Incrémentez-le après une récupération réussie.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

Éviter les chargements en double

La fonction de rappel peut être déclenchée plusieurs fois. Utilisez un indicateur loading afin qu’une nouvelle récupération ne commence pas tant que la précédente est en cours.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

Ajouter de nouveaux éléments

Ajoutez les éléments récupérés avant l’élément sentinel afin qu’il reste en bas de la liste qui s’agrandit, prêt à déclencher le chargement suivant.

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

S’arrêter à la fin

Lorsque le serveur ne renvoie plus de données, utilisez disconnect pour déconnecter l’observateur afin qu’il cesse d’essayer de charger du contenu. Cela évite les requêtes vides incessantes.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

Pourquoi rootMargin est utile

Un rootMargin généreux, par exemple 200px, commence le chargement avant que l’utilisateur n’atteigne réellement le bas de la page. Les nouveaux éléments apparaissent ainsi de manière fluide, sans pause visible.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

Remarques sur l’accessibilité

Le défilement infini peut piéger les utilisateurs du clavier et des lecteurs d’écran, tout en masquant le pied de page. Envisagez un bouton manuel Charger davantage comme solution de secours et annoncez poliment le nouveau contenu avec des régions dynamiques ARIA.

Le déroulement complet

Défilement infini avec l’observateur d’intersections : placez un sentinel, observez-le, chargez et ajoutez les données lorsqu’il devient visible, empêchez les chargements en double, puis déconnectez l’observateur lorsque les données sont épuisées. Aucun calcul lié au défilement n’est nécessaire.

Vérification rapide

Vérifiez votre compréhension du défilement infini.

Récapitulatif

Vous avez créé un défilement infini :

Placez un élément sentinel après la liste.
Observez-le avec un observateur d’intersections.
Lors de l’intersection, récupérez et ajoutez la page suivante.
Utilisez un indicateur loading pour éviter les récupérations en double.
Déconnectez l’observateur lorsque les données sont épuisées.

Ensuite, nous créerons des animations déclenchées par le défilement.

Questions Fréquemment Posées

La leçon « Défilement infini » est-elle gratuite ?

Oui — le texte complet de « Défilement infini » 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 « Défilement infini » ?

Chargez davantage de contenu pendant le défilement de l’utilisateur. 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 3 sur 4.

Combien de temps prend la leçon « Défilement infini » ?

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