Erfahren Sie mehr über die Prinzipien und praktischen Aspekte des Infinite Scroll.
Im Gegensatz zur Click-to-Load-Methode der herkömmlichen Paginierung ermöglicht das unendliche Scrollen das kontinuierliche Laden von Inhalten, wenn Benutzer auf der Seite nach unten scrollen. Diese Funktion kann insbesondere auf Mobilgeräten für ein flüssigeres Erlebnis sorgen.
Erfahren Sie, wie Sie mit einfachem HTML, CSS und JavaScript einen unendlichen Bildlauf einrichten.
Einrichten des Frontends
Beginnen Sie mit einer grundlegenden HTML-Struktur zur Anzeige Ihrer Inhalte. Hier ist ein Beispiel:
html>
<html>
<head>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<h1>Infinite Scroll Pageh1><divclass="products__list">
<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" /><imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" /><imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" /><imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" /><imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" /><imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
div>
<scriptsrc="script.js">script>
body>
html>
Diese Seite enthält eine Reihe von Platzhalterbildern und verweist auf zwei Ressourcen: eine CSS-Datei und eine JavaScript-Datei.
CSS-Styling für scrollbare Inhalte
Um die Platzhalterbilder in einem Raster anzuzeigen, fügen Sie das folgende CSS zu Ihrem hinzu style.css Datei:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}html { font-size: 62.5%; }
body {
font-family: Cambria, Times, "TimesNewRoman", serif;
}
h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}
img {
width: 100%;
display: block;
}
.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.products__list > * {
width: calc(33% - 2rem);
}
.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}
Im Moment sollte Ihre Seite so aussehen:
Kernimplementierung mit JS
Bearbeiten script.js. Um den unendlichen Bildlauf zu implementieren, müssen Sie erkennen, wann der Benutzer am unteren Rand des Inhaltscontainers oder der Seite gescrollt hat.
"use strict";window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Erstellen Sie dann eine Funktion zum Abrufen weiterer Platzhalterdaten.
asyncfunctionfetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");if (!response.ok) {
thrownewError("Network response was not ok");
}
let data = await response.json();
console.log(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
}
}
Für dieses Projekt können Sie die API von verwenden fakestoreapi.
Um zu bestätigen, dass Ihre Daten beim Scrollen abgerufen werden, werfen Sie einen Blick auf die Konsole:
Sie werden feststellen, dass Ihre Daten beim Scrollen mehrmals abgerufen werden, was sich negativ auf die Geräteleistung auswirken kann. Um dies zu verhindern, erstellen Sie einen anfänglichen Abrufstatus der Daten:
let isFetching = false;Ändern Sie dann Ihre Abruffunktion so, dass Daten erst dann abgerufen werden, wenn ein vorheriger Abruf abgeschlossen ist.
asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetchingisFetching = true; // Set the flag to true
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");if (!response.ok) {
thrownewError("Network response was not ok");
}
let data = await response.json();
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false; // Reset the flag to false
}
}
Anzeigen des neuen Inhalts
Um neue Inhalte anzuzeigen, wenn der Benutzer auf der Seite nach unten scrollt, erstellen Sie eine Funktion, die die Bilder an den übergeordneten Container anhängt.
Wählen Sie zunächst das übergeordnete Element aus:
const productsList = document.querySelector(".products__list");Erstellen Sie dann eine Funktion zum Anhängen von Inhalten.
functiondisplayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}Ändern Sie abschließend Ihre Abruffunktion und übergeben Sie die abgerufenen Daten an die Append-Funktion.
asyncfunctionfetchMoreContent() {
if (isFetching) return; isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");
if (!response.ok) {
thrownewError("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false;
}
}
Und damit funktioniert Ihre unendliche Schriftrolle jetzt.
Um das Benutzererlebnis zu verbessern, können Sie beim Abrufen neuer Inhalte eine Ladeanzeige anzeigen. Fügen Sie zunächst diesen HTML-Code hinzu.
<h1class="loading-indicator">Loading...h1>Wählen Sie dann das Ladeelement aus.
const loadingIndicator = document.querySelector(".loading-indicator");Erstellen Sie abschließend zwei Funktionen, um die Sichtbarkeit der Ladeanzeige umzuschalten.
functionshowLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}functionhideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Fügen Sie sie dann zur Abruffunktion hinzu.
asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetchingisFetching = true;
showLoadingIndicator(); // Show loadertry {
let response = await fetch("https://fakestoreapi.com/products? limit=3");if (!response.ok) {
thrownewError("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
hideLoadingIndicator(); // Hide loader
isFetching = false;
}
}
Was ergibt:
Zu den bewährten Methoden, die Sie befolgen sollten, gehören:
- Holen Sie nicht zu viele Artikel gleichzeitig ab. Dies kann den Browser überfordern und die Leistung beeinträchtigen.
- Anstatt den Inhalt sofort abzurufen, wenn ein Scroll-Ereignis erkannt wird, Verwenden Sie eine Entprellfunktion um den Abruf etwas zu verzögern. Das kann Verhindern Sie übermäßige Netzwerkanforderungen.
- Nicht alle Benutzer bevorzugen unendliches Scrollen. Bieten Sie eine Option an Verwenden Sie eine Paginierungskomponente wenn gewünscht.
- Wenn keine weiteren Inhalte geladen werden müssen, informieren Sie den Benutzer, anstatt ständig zu versuchen, weitere Inhalte abzurufen.
Das nahtlose Laden von Inhalten meistern
Unendliches Scrollen ermöglicht Benutzern das reibungslose Durchsuchen von Inhalten und eignet sich hervorragend für Benutzer mobiler Geräte. Wenn Sie die Tipps und wichtigen Ratschläge aus diesem Artikel nutzen, können Sie diese Funktion zu Ihren Websites hinzufügen.
Denken Sie daran, darüber nachzudenken, wie sich die Benutzer fühlen, wenn sie Ihre Website nutzen. Zeigen Sie Dinge wie Fortschrittszeichen und Fehlerhinweise an, um sicherzustellen, dass der Benutzer weiß, was passiert.
