Home-theater-designers
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.
MUO Video af dagen RUL FOR AT FORTSÆTTE MED INDHOLD
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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="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, "Times New Roman", 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.
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true; // Set the flag to true
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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.
function displayNewContent(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.
async function fetchMoreContent() {
if (isFetching) return;
isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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.
Uendelige rulleforbedringer
For at forbedre brugeroplevelsen kan du vise en indlæsningsindikator, når du henter nyt indhold. Start med at tilføje denne HTML.
<h1 class="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.
amazon music unlimited vs prime music
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Føj dem derefter til hentefunktionen.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true;
showLoadingIndicator(); // Show loader
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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:
God praksis for Infinite Scroll
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.