Home-theater-designers
Uendelig rulling lar innhold lastes kontinuerlig mens brukere beveger seg nedover siden, i motsetning til klikk-for-å-last-metoden med tradisjonell paginering. Denne funksjonen kan tilby en jevnere opplevelse, spesielt på mobile enheter.
MUO Video av dagen RULL FOR Å FORTSETTE MED INNHOLD
Oppdag hvordan du setter opp uendelig rulling ved hjelp av vanlig HTML, CSS og JavaScript.
Sette opp frontend
Start med en grunnleggende HTML-struktur for å vise innholdet ditt. Her er et eksempel:
apple watch serie 2 rustfritt stål vs aluminium
<!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 siden inneholder en serie plassholderbilder og refererer til to ressurser: en CSS-fil og en JavaScript-fil.
CSS-styling for rullbart innhold
For å vise plassholderbildene i et rutenett, legg til 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%);
}
For øyeblikket skal siden din se slik ut:
Kjerneimplementering med JS
Redigere script.js . For å implementere uendelig rulling, må du oppdage når brukeren har rullet nær bunnen av innholdsbeholderen 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();
}
});
Deretter oppretter du en funksjon for å hente flere plassholderdata.
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");
}
}
For dette prosjektet kan du bruke API fra fakestoreapi .
Ta en titt på konsollen for å bekrefte at dataene dine hentes ved rulling:
Du vil legge merke til at dataene dine blir hentet flere ganger når du ruller, noe som kan være en faktor som skader enhetens ytelse. For å forhindre dette, opprett en innledende hentingstilstand for dataene:
let isFetching = false;
Deretter endrer du hentefunksjonen din slik at den bare henter data etter at en tidligere henting er fullført.
kan jeg oppgradere min macbook pro
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 innholdet
For å vise nytt innhold når brukeren ruller nedover siden, lag en funksjon som legger til bildene til den overordnede beholderen.
Velg først det overordnede elementet:
const productsList = document.querySelector(".products__list");
Deretter oppretter du en funksjon for å legge til innhold.
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 slutt, modifiser hentefunksjonen og send de hentede dataene til tilleggsfunksjonen.
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 den uendelige rullingen nå.
Uendelige rulleforbedringer
For å forbedre brukeropplevelsen kan du vise en lasteindikator når du henter nytt innhold. Start med å legge til denne HTML-en.
<h1 class="loading-indicator">Loading...</h1>
Velg deretter lasteelementet.
const loadingIndicator = document.querySelector(".loading-indicator");
Til slutt, lag to funksjoner for å bytte synligheten til lasteindikatoren.
hvordan finne gamle tekstmeldinger
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Deretter legger du dem til hentefunksjonen.
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;
}
}
Som gir:
Gode fremgangsmåter for Infinite Scroll
Noen beste fremgangsmåter å følge inkluderer:
- Ikke hent for mange varer samtidig. Dette kan overvelde nettleseren og redusere ytelsen.
- I stedet for å hente innhold umiddelbart etter oppdagelse av en rullehendelse, bruk en debounce-funksjon for å forsinke hentingen litt. Dette kan forhindre overdreven nettverksforespørsler .
- Ikke alle brukere foretrekker uendelig rulling. Tilby et alternativ til bruke en pagineringskomponent hvis ønsket.
- Hvis det ikke er mer innhold å laste, informer brukeren i stedet for kontinuerlig å prøve å hente mer innhold.
Mestring av sømløs innholdslasting
Uendelig rulling lar brukere bla gjennom innhold jevnt, og det er flott for folk som bruker mobile enheter. Hvis du bruker tipsene og viktige rådene fra denne artikkelen, kan du legge til denne funksjonen på nettsidene dine.
Husk å tenke på hvordan brukerne har det når de bruker nettstedet ditt. Vis ting som fremdriftstegn og feilmeldinger for å sikre at brukeren vet hva som skjer.