Qu'est-ce que le parchemin infini ?

Vous avez peut-être déjà vu des sites comme des boutiques en ligne où, lorsque vous faites défiler la page, des produits apparaissent en continu. Un autre exemple est unlimited.horse, cela peut paraître simple mais c'est un excellent exemple pour démontrer la fonctionnalité de "Infinite Scrolls". Lorsque vous accédez au site Web, vous voyez un cheval, mais lorsque vous faites défiler la page, vous réalisez que les jambes du cheval continuent de grandir indéfiniment et que vous n'arrivez jamais aux pieds du cheval.

Implémentation du défilement infini

Cette fonctionnalité est largement utilisée dans le développement moderne. Nous pouvons voir le défilement infini en action sur les principaux réseaux sociaux, tels que Twitter, Facebook et surtout Instagram, où le contenu semble ne jamais s'arrêter lorsque nous faisons défiler la page.

Dans cet article, je vais démontrer une implémentation de base de cette fonctionnalité. Cependant, cette approche ne résout pas les problèmes tels que les problèmes liés aux requêtes longues, à la mise en œuvre de la mise en cache et à d'autres solutions requises pour les applications de production. Il s’agit néanmoins d’un point de départ pour comprendre comment nous pouvons implémenter cette fonctionnalité.

Étape 1 : Décidez où ajouter la fonctionnalité de défilement infini

Tout d’abord, décidez où vous allez ajouter la fonctionnalité de défilement infini. S'agira-t-il d'une liste de messages ou d'images ? Vous devrez également décider d’où proviendront les données. Pour cet exemple, nous utiliserons des images provenant d'une API de base, l'API Random Fox.

Étape 2 : Créez votre fichier HTML

Créez le fichier HTML et incluez un conteneur pour vos images de renard aléatoires.

Fox Images

Étape 3 : Créez votre fichier CSS

Pour cet exemple, nous garderons la feuille de style très simple.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

Étape 4 : Créez votre fichier JavaScript

Sélectionnez le conteneur et obtenez l'URL de l'API Random Fox. N'oubliez pas de lier vos fichiers JavaScript et CSS dans le HTML.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i 




  
  
  Étape 5 : ajouter l'événement de défilement


Pour implémenter la fonctionnalité de défilement infini, ajoutez cet écouteur d'événement :


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




Si la somme de scrollY et innerHeight est supérieure ou égale à scrollHeight, cela signifie que nous avons atteint la fin du document et que nous devons donc charger plus d'images.


  
  
  Conclusion


Votre page devrait désormais être fonctionnelle avec la technique du défilement infini. Voici un défi pour vous : essayez de refaire ce projet en utilisant une autre API de votre choix, implémentez également un style plus élaboré pour afficher vos éléments. Bonne chance!