Heim > Artikel > Web-Frontend > Verstehen und Implementieren von Infinite Scroll mit JavaScript

Verstehen und Implementieren von Infinite Scroll mit JavaScript

王林Original: 2024-07-23 12:35:31699Durchsuche

Entendendo e Implementando o Scroll Infinito com JavaScript

Was ist Infinite Scroll?

Möglicherweise haben Sie bereits Websites wie Online-Shops gesehen, auf denen beim Scrollen auf der Seite fortlaufend Produkte angezeigt werden. Ein weiteres Beispiel ist unlimited.horse. Es mag einfach erscheinen, ist aber ein hervorragendes Beispiel, um die Funktionalität von „Infinite Scrolls“ zu demonstrieren. Wenn Sie auf die Website zugreifen, sehen Sie ein Pferd, aber wenn Sie auf der Seite nach unten scrollen, stellen Sie fest, dass die Beine des Pferdes auf unbestimmte Zeit weiter wachsen und Sie nie die Füße des Pferdes erreichen.

Implementierung von Infinite Scroll

Diese Funktionalität wird in der modernen Entwicklung häufig verwendet. In großen sozialen Netzwerken wie Twitter, Facebook und insbesondere Instagram können wir das unendliche Scrollen in Aktion beobachten, wo der Inhalt nie zu enden scheint, wenn wir auf der Seite nach unten scrollen.

In diesem Artikel werde ich eine grundlegende Implementierung dieser Funktionalität demonstrieren. Dieser Ansatz befasst sich jedoch nicht mit Problemen wie Problemen mit langen Abfragen, der Caching-Implementierung und anderen für Produktionsanwendungen erforderlichen Lösungen. Dennoch ist dies ein Ausgangspunkt, um zu verstehen, wie wir diese Funktion implementieren können.

Schritt 1: Entscheiden Sie, wo Sie die Funktion zum unendlichen Scrollen hinzufügen möchten

Entscheiden Sie zunächst, wo Sie die Funktion zum unendlichen Scrollen hinzufügen möchten. Wird es eine Liste mit Beiträgen oder Bildern sein? Sie müssen auch entscheiden, woher die Daten stammen sollen. Für dieses Beispiel verwenden wir Bilder von einer Basis-API, der Random Fox API.

Schritt 2: Erstellen Sie Ihre HTML-Datei

Erstellen Sie die HTML-Datei und fügen Sie einen Container für Ihre zufälligen Fuchsbilder hinzu.

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

Schritt 3: Erstellen Sie Ihre CSS-Datei

Für dieses Beispiel halten wir das Stylesheet sehr einfach.

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

Schritt 4: Erstellen Sie Ihre JavaScript-Datei

Wählen Sie den Container aus und rufen Sie die Random Fox API-URL ab. Vergessen Sie nicht, Ihre JavaScript- und CSS-Dateien im HTML zu verknüpfen.

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

Schritt 5: Fügen Sie das Scroll-Ereignis hinzu

Um die Funktion zum unendlichen Scrollen zu implementieren, fügen Sie diesen Ereignis-Listener hinzu:

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

Wenn die Summe von scrollY und innerHeight größer oder gleich scrollHeight ist, bedeutet dies, dass wir das Ende des Dokuments erreicht haben und daher weitere Bilder laden müssen.

Abschluss

Ihre Seite sollte jetzt mit der Infinite-Scroll-Technik funktionieren. Hier ist eine Herausforderung für Sie: Versuchen Sie, dieses Projekt mit einer anderen API Ihrer Wahl zu wiederholen und implementieren Sie außerdem einen ausgefeilteren Stil zur Anzeige Ihrer Artikel. Viel Glück!

Das obige ist der detaillierte Inhalt vonVerstehen und Implementieren von Infinite Scroll mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html for Event

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Visuelle Regressionstests mit Cypress und Percy: Ein umfassender LeitfadenNächster Artikel：Visuelle Regressionstests mit Cypress und Percy: Ein umfassender Leitfaden

In Verbindung stehende Artikel

Mehr sehen