Hur man implementerar Infinite Scroll i en webbapplikation
Infinite scroll låter innehållet laddas kontinuerligt när användarna rör sig nedåt på sidan, till skillnad från metoden att klicka för att ladda i traditionell paginering. Denna funktion kan ge en smidigare upplevelse, särskilt på mobila enheter.
Utforska processen för att implementera ett gränssnitt med oändlig rullning med hjälp av grundläggande HTML, stilistisk CSS och mångsidiga JavaScript-tekniker.
Konfigurera frontend
Använd ett grundläggande HTML-ramverk för att visa ditt innehåll. Ett exempel är följande:
<!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>
en CSS-fil (Cascading Style Sheets) och en JS-fil (JavaScript).
CSS Styling för rullbart innehåll
För att presentera platshållargrafiken i ett rutnätsliknande arrangemang, inkludera följande stilistiska regler i 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%);
}
För närvarande bör utseendet på din webbsida likna den layout och design som anges nedan:
Core Implementation With JS
För att effektivt integrera infinite scrolling-funktionalitet i din webbapplikation är det viktigt att övervaka användarens närhet till basen av innehållsområdet eller hela webbsidan. Detta kan uppnås genom att använda JavaScript och CSS för att observera positionen för scrollhändelsen i förhållande till vyporthöjden och utlösa lämpliga åtgärder i enlighet med detta.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY \\+ window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Till att börja med ska vi utveckla en funktion som hämtar ytterligare platshållardata. Detta kan uppnås genom att implementera ett API-anrop eller använda en databasförfrågan beroende på de specifika kraven i din applikation. De hämtade uppgifterna kommer sedan att användas som indata för vidare bearbetning och visning i användargränssnittet.
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");
}
}
För detta projekt kan du använda API:et från fakestoreapi .
För att verifiera att dina data hämtas när du bläddrar igenom sidan är det lämpligt att undersöka webbläsarens utvecklarkonsol för att se om det finns några utdata eller indikationer på att hämtningen av data har lyckats. Detta kan ge användbara insikter och feedback om skriptets funktionalitet.
För att minska eventuella prestandaproblem som uppstår vid upprepad hämtning av data när du bläddrar rekommenderas att du skapar ett initialt laddningsläge för informationen, vilket säkerställer effektiv drift av enheten.
let isFetching = false;
För att säkerställa att hämtningen av data utförs på ett effektivt sätt är det nödvändigt att modifiera implementeringen av funktionen fetch så att den endast fortsätter med hämtningen av information när dess föregångare har slutförts framgångsrikt. Detta kan uppnås genom att införa ytterligare logik i koden för att övervaka och hantera exekveringsflödet av flera samtidiga förfrågningar, vilket förhindrar eventuella flaskhalsar eller förseningar som kan uppstå på grund av samtidiga operationer på delade resurser.
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
}
}
Visa det nya innehållet
För att dynamiskt uppdatera den visuella representationen av nyhetsflödet när användaren scrollar igenom det, är ett sätt att definiera en funktion som ändrar det överordnade elementet som innehåller listobjekten som representerar varje inlägg i flödet. Detta kan uppnås genom att lägga till nya bildelement till denna behållare när användaren skrollar längre ner på sidan, vilket effektivt uppdaterar den visade delen av flödet med nyare inlägg.
Välj först det överordnade elementet:
const productsList = document.querySelector(".products__list");
Skapa sedan en funktion för att lägga till innehåll.
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
});
}
Sammanfattningsvis är det nödvändigt att ändra funktionen fetch och vidarebefordra den hämtade informationen till metoden append .
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;
}
}
Implementeringen av en infinite scroll-funktionalitet har framgångsrikt integrerats, vilket möjliggör sömlös navigering genom en till synes oändlig mängd innehåll när man går ner på sidan.
Förbättringar av infinite scroll
För att förbättra användarupplevelsen rekommenderas att en laddningsindikator visas när nytt innehåll hämtas. Detta kan åstadkommas genom att införliva följande HTML-kod.
<h1 class="loading-indicator">Loading...</h1>
Välj sedan laddningselementet.
const loadingIndicator = document.querySelector(".loading-indicator");
Avslutningsvis, implementera två funktioner som kontrollerar laddningsindikatorns visningsstatus med hjälp av JavaScript.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Lägg sedan till dem i fetch-funktionen.
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;
}
}
Vilket ger:
Din webbläsare stöder inte videotaggen.
Bästa praxis för oändlig rullning
Några bästa praxis att följa inkluderar:
Det är lämpligt att undvika att begära ett alltför stort antal objekt samtidigt, eftersom detta kan leda till att webbläsaren blir överbelastad och minska den övergripande effektiviteten.
För att minska problemet med frekventa nätverksförfrågningar som orsakas av att innehåll hämtas omedelbart när en scrollhändelse upptäcks, är ett sätt att använda en debouncing-mekanism. Genom att använda denna teknik fördröjs hämtningen av innehåll under en viss tidsperiod efter att scrollhändelsen har inträffat. På så sätt minskar antalet onödiga nätverksförfrågningar och den övergripande prestandan förbättras.
Även om vissa användare uppskattar bekvämligheten med oändlig scrollning, är det viktigt att inse att inte alla delar denna preferens. Att tillhandahålla ett alternativ i form av en pagineringskomponent kan vara till nytta för dem som tycker att det är mer effektivt eller användarvänligt. I slutändan gör båda alternativen det möjligt för individer att skräddarsy sin surfupplevelse efter sina individuella behov och preferenser.
Det skulle vara lämpligare att meddela användaren när det inte finns något mer innehåll att ladda, snarare än att upprepade gånger försöka hämta ytterligare data.
Mastering Seamless Content Loading
Att integrera infinite scrolling i webbplatsdesignen ger en sömlös användarupplevelse, särskilt på mobila enheter, som blir allt vanligare i dagens digitala landskap. Genom att följa riktlinjerna i den här artikeln kan utvecklare effektivt integrera denna funktionalitet i sina webbprojekt.
När man utformar en webbplats är det viktigt att ta hänsyn till känslorna hos de användare som kommer att interagera med den. För att underlätta en positiv upplevelse, visa indikatorer på framsteg och ge tydliga felmeddelanden som informerar användarna om eventuella problem som kan uppstå under deras interaktion med webbplatsen.