Heim > Artikel > Web-Frontend > Verstehen und Implementieren von Infinite Scroll mit JavaScript
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.
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.
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.
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>
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; }
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();
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.
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!