Comprendre et implémenter Infinite Scroll avec JavaScript-js tutoriel-php.cn

Comprendre et implémenter Infinite Scroll avec JavaScript

王林

Libérer： 2024-07-23 12:35:31

original

743 Les gens l'ont consulté

Entendendo e Implementando o Scroll Infinito com JavaScript

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, vous voyez un cheval, mais lorsque vous faites défiler la page, vous vous rendez compte que les jambes du cheval continuent de grandir indéfiniment, et vous n'atteignez jamais les 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 à mesure que l'on fait 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 mettre en œuvre 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 issues 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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container"></div>
<script src="script.js"></script>
</body>
</html>

Copier après la connexion

É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;
}

Copier après la connexion

É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 < numImages) {
    const img = document.createElement('img');
    img.src = `${URL}${getRandomNumber()}.jpg`;
    container.appendChild(img);
    i++;
  }
}

loadImages();

Copier après la connexion

É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();
  }
});

Copier après la connexion

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 maintenant ê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 !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!