Lær om principperne og praktiske funktioner ved uendelig rulle.
Uendelig rulning lader indholdet indlæses kontinuerligt, efterhånden som brugerne bevæger sig ned på siden, i modsætning til klik-for-at-indlæse-metoden med traditionel paginering. Denne funktion kan tilbyde en mere jævn oplevelse, især på mobile enheder.
Opdag, hvordan du opsætter uendelig scroll ved hjælp af almindelig HTML, CSS og JavaScript.
Opsætning af frontend
Start med en grundlæggende HTML-struktur for at vise dit indhold. Her er et eksempel:
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>
Denne side indeholder en række pladsholderbilleder og henviser til to ressourcer: en CSS-fil og en JavaScript-fil.
CSS-styling til indhold, der kan rulles
For at vise pladsholderbillederne i et gitter skal du tilføje følgende CSS til din style.css fil:
* {
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%);
}
I øjeblikket skulle din side se sådan ud:
Kerneimplementering med JS
Redigere script.js. For at implementere uendelig rulning skal du registrere, hvornår brugeren har rullet nær bunden af indholdsbeholderen eller siden.
"use strict";window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Opret derefter en funktion til at hente flere pladsholderdata.
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");
}
}
Til dette projekt kan du bruge API fra fakestoreapi.
Tag et kig på konsollen for at bekræfte, at dine data bliver hentet på scroll:
Du vil bemærke, at dine data bliver hentet flere gange ved rulning, hvilket kan være en faktor, der skader enhedens ydeevne. For at forhindre dette skal du oprette en indledende hentetilstand for dataene:
let isFetching = false;Rediger derefter din hentning-funktion til kun at hente data, efter at en tidligere hentning er afsluttet.
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
}
}
Viser det nye indhold
For at vise nyt indhold, når brugeren ruller ned på siden, skal du oprette en funktion, der tilføjer billederne til den overordnede container.
Først skal du vælge det overordnede element:
const productsList = document.querySelector(".products__list");Opret derefter en funktion til at tilføje indhold.
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
});
}Til sidst skal du ændre din hentefunktion og videregive de hentede data til tilføjelsesfunktionen.
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;
}
}
Og med det fungerer din uendelige rulle nu.
For at forbedre brugeroplevelsen kan du vise en indlæsningsindikator, når du henter nyt indhold. Start med at tilføje denne HTML.
<h1class="loading-indicator">Loading...h1>Vælg derefter indlæsningselementet.
const loadingIndicator = document.querySelector(".loading-indicator");Til sidst skal du oprette to funktioner for at skifte synligheden af lastindikatoren.
functionshowLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}functionhideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Føj dem derefter til hentefunktionen.
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;
}
}
Hvilket giver:
Nogle bedste fremgangsmåder, der skal følges, omfatter:
- Hent ikke for mange varer samtidigt. Dette kan overvælde browseren og forringe ydeevnen.
- I stedet for at hente indhold umiddelbart efter detektering af en rullehændelse, bruge en debounce-funktion for at forsinke apporteringen lidt. Dette kan forhindre for store netværksanmodninger.
- Ikke alle brugere foretrækker uendelig rulning. Tilbyde en mulighed for bruge en pagineringskomponent hvis ønsket.
- Hvis der ikke er mere indhold at indlæse, skal du informere brugeren i stedet for løbende at prøve at hente mere indhold.
Mestring af problemfri indholdsindlæsning
Uendelig rulning giver brugerne mulighed for at gennemse indhold uden problemer, og det er fantastisk til folk, der bruger mobile enheder. Hvis du bruger tips og vigtige råd fra denne artikel, kan du tilføje denne funktion til dine hjemmesider.
Husk at tænke over, hvordan brugerne har det, når de bruger dit websted. Vis ting som fremskridtstegn og fejlnoter for at sikre, at brugeren ved, hvad der sker.
