Découvrez les principes et les aspects pratiques du défilement infini.

Le défilement infini permet au contenu de se charger en continu à mesure que les utilisateurs descendent sur la page, contrairement à la méthode de pagination traditionnelle par clic pour charger. Cette fonctionnalité peut offrir une expérience plus fluide, notamment sur les appareils mobiles.

Découvrez comment configurer le défilement infini en utilisant HTML simple, CSS et JavaScript.

Configuration du front-end

Commencez par une structure HTML de base pour afficher votre contenu. Voici un exemple :

html>
<html>
<head>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<h1>Infinite Scroll Pageh1>
<divclass="products__list">
<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />







instagram viewer



<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>
<scriptsrc="script.js">script>
body>
html>

Cette page contient une série d'images d'espace réservé et fait référence à deux ressources: un fichier CSS et un fichier JavaScript.

Style CSS pour le contenu défilant

Pour afficher les images d'espace réservé dans une grille, ajoutez le CSS suivant à votre style.css déposer:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }


body {
font-family: Cambria, Times, "TimesNewRoman", serif;
}


h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}


img {
width: 100%;
display: block;
}


.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}


.products__list > * {
width: calc(33% - 2rem);
}


.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}

Pour le moment, votre page devrait ressembler à ceci :

Implémentation de base avec JS

Modifier script.js. Pour implémenter le défilement infini, vous devez détecter le moment où l'utilisateur a fait défiler vers le bas du conteneur de contenu ou de la page.

"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
 ) {
// User is near the bottom, fetch more content
 fetchMoreContent();
 }
});

Ensuite, créez une fonction pour récupérer davantage de données d'espace réservé.

asyncfunctionfetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");
if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
console.log(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 }
}

Pour ce projet, vous pouvez utiliser l'API de faux magasinapi.

Pour confirmer que vos données sont récupérées lors du défilement, jetez un œil à la console :

Vous remarquerez que vos données sont récupérées plusieurs fois lors du défilement, ce qui peut nuire aux performances de l'appareil. Pour éviter cela, créez un état initial de récupération des données :

let isFetching = false;

Ensuite, modifiez votre fonction de récupération pour récupérer les données uniquement une fois une récupération précédente terminée.

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true; // Set the flag to true


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false; // Reset the flag to false
 }
}

Affichage du nouveau contenu

Pour afficher un nouveau contenu lorsque l'utilisateur fait défiler la page, créez une fonction qui ajoute les images au conteneur parent.

Tout d'abord, sélectionnez l'élément parent :

const productsList = document.querySelector(".products__list");

Ensuite, créez une fonction pour ajouter du contenu.

functiondisplayNewContent(data) {
 data.forEach((item) => {
const imgElement = document.createElement("img");
 imgElement.src = item.image;
 imgElement.alt = item.title;
 productsList.appendChild(imgElement); // Append to productsList container
 });
}

Enfin, modifiez votre fonction fetch et transmettez les données récupérées à la fonction append.

asyncfunctionfetchMoreContent() {
if (isFetching) return;
 isFetching = true;


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false;
 }
}

Et avec ça, votre parchemin infini fonctionne désormais.

Pour améliorer l'expérience utilisateur, vous pouvez afficher un indicateur de chargement lors de la récupération d'un nouveau contenu. Commencez par ajouter ce HTML.

<h1class="loading-indicator">Loading...h1>

Sélectionnez ensuite l'élément de chargement.

const loadingIndicator = document.querySelector(".loading-indicator");

Enfin, créez deux fonctions pour basculer la visibilité de l'indicateur de chargement.

functionshowLoadingIndicator() {
 loadingIndicator.style.display = "block";
console.log("Loading...");
}
functionhideLoadingIndicator() {
 loadingIndicator.style.display = "none";
console.log("Finished loading.");
}

Ensuite, ajoutez-les à la fonction fetch.

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true;
 showLoadingIndicator(); // Show loader


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 hideLoadingIndicator(); // Hide loader
 isFetching = false;
 }
}

Qui donne:

Voici quelques bonnes pratiques à suivre :

  • Ne récupérez pas trop d’éléments simultanément. Cela peut surcharger le navigateur et dégrader les performances.
  • Au lieu de récupérer le contenu immédiatement après la détection d'un événement de défilement, utiliser une fonction anti-rebond pour retarder légèrement la récupération. Ceci peut éviter les demandes réseau excessives.
  • Tous les utilisateurs ne préfèrent pas le défilement infini. Offrir une option pour utiliser un composant de pagination si on le désire.
  • S'il n'y a plus de contenu à charger, informez-en l'utilisateur au lieu d'essayer continuellement de récupérer plus de contenu.

Maîtriser le chargement fluide du contenu

Le défilement infini permet aux utilisateurs de parcourir le contenu en douceur et est idéal pour les personnes utilisant des appareils mobiles. Si vous utilisez les astuces et conseils importants de cet article, vous pouvez ajouter cette fonctionnalité à vos sites Web.

N'oubliez pas de réfléchir à ce que ressentent les utilisateurs lorsqu'ils utilisent votre site. Affichez des éléments tels que des signes de progression et des notes d'erreur pour vous assurer que l'utilisateur sait ce qui se passe.