Was ist Infinite Scroll?

Vielleicht 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 unendlich weiter wachsen und Sie nie zu den Füßen des Pferdes gelangen.

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 Infinite 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 behebt jedoch nicht Probleme wie Probleme mit langen Abfragen, Caching-Implementierung und anderen Lösungen, die für Produktionsanwendungen erforderlich sind. Dennoch ist dies ein Ausgangspunkt für das Verständnis, 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 ein.

Fox Images

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 verlinken.

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 




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


Um die Infinite-Scroll-Funktionalität 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!