Lær om prinsippene og praktiske funksjonene ved uendelig rulling.

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.

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:

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" />







instagram viewer



<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>
<scriptsrc="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, "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%);
}

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.

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");
 }
}

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.

asyncfunctionfetchMoreContent() {
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) {
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 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.

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 slutt, modifiser hentefunksjonen og send de hentede dataene til tilleggsfunksjonen.

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 den uendelige rullingen nå.

For å forbedre brukeropplevelsen kan du vise en lasteindikator når du henter nytt innhold. Start med å legge til denne HTML-en.

<h1class="loading-indicator">Loading...h1>

Velg deretter lasteelementet.

const loadingIndicator = document.querySelector(".loading-indicator");

Til slutt, lag to funksjoner for å bytte synligheten til lasteindikatoren.

functionshowLoadingIndicator() {
 loadingIndicator.style.display = "block";
console.log("Loading...");
}
functionhideLoadingIndicator() {
 loadingIndicator.style.display = "none";
console.log("Finished loading.");
}

Deretter legger du dem til hentefunksjonen.

asyncfunctionfetchMoreContent() {
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) {
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;
 }
}

Som gir:

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.