Hoe oneindig scrollen implementeren in een webapplicatie
Oneindig scrollen laat inhoud continu laden terwijl gebruikers naar beneden gaan, in tegenstelling tot de click-to-load methode van traditionele paginering. Deze functie kan een soepelere ervaring bieden, vooral op mobiele apparaten.
Verken het proces van het implementeren van een oneindig scrollende interface met behulp van fundamentele HTML, stilistisch CSS en veelzijdige JavaScript-technieken.
De voorkant opzetten
Een fundamenteel HTML-raamwerk gebruiken om je inhoud weer te geven. Een voorbeeld ziet er als volgt uit:
<!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>
een Cascading Style Sheets (CSS) bestand en een JavaScript (JS) bestand.
CSS Styling voor scrollbare inhoud
Om de plaatshouderafbeeldingen in een rasterachtige opstelling te presenteren, neem je de volgende stijlregels op in je “style.css”-bestand:
* {
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%);
}
Op dit moment zou het uiterlijk van je webpagina moeten lijken op de lay-out en het ontwerp hieronder:
Kernimplementatie met JS
Om oneindig scrollen effectief op te nemen in uw webapplicatie, is het cruciaal om te controleren hoe dicht de gebruiker bij de basis van het inhoudsgebied of de hele webpagina is. Dit kan worden bereikt door JavaScript en CSS te gebruiken om de positie van de scroll-event ten opzichte van de viewporthoogte te observeren en dienovereenkomstig de juiste acties te activeren.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY \\+ window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Om te beginnen ontwikkelen we een functie die extra plaatshoudergegevens ophaalt. Dit kan worden bereikt door een API-oproep te implementeren of door een database query te gebruiken, afhankelijk van de specifieke vereisten van je applicatie. De opgehaalde gegevens worden dan gebruikt als invoer voor verdere verwerking en weergave in de gebruikersinterface.
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");
}
}
Voor dit project kun je de API van fakestoreapi gebruiken.
Om te controleren of je gegevens worden opgehaald terwijl je door de pagina scrollt, is het raadzaam om de ontwikkelaarsconsole van de browser te onderzoeken op uitvoer of aanwijzingen dat het ophalen van de gegevens is gelukt. Dit kan nuttige inzichten en feedback geven over de functionaliteit van het script.
Om mogelijke prestatieproblemen als gevolg van het herhaaldelijk ophalen van gegevens tijdens het scrollen te beperken, wordt aanbevolen om een initiële laadstatus voor de informatie in te stellen, zodat het apparaat efficiënt werkt.
let isFetching = false;
Om ervoor te zorgen dat het ophalen van gegevens op een efficiënte manier gebeurt, is het nodig om de implementatie van de functie fetch aan te passen zodat de informatie pas wordt opgehaald als de vorige functie met succes is voltooid. Dit kan worden bereikt door het introduceren van extra logica in de code om de uitvoeringsstroom van meerdere gelijktijdige verzoeken te controleren en beheren, om zo mogelijke knelpunten of vertragingen te voorkomen die kunnen ontstaan door gelijktijdige bewerkingen op gedeelde bronnen.
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
}
}
De nieuwe inhoud weergeven
Om de visuele weergave van de nieuwsfeed dynamisch bij te werken terwijl de gebruiker erdoorheen scrollt, is een aanpak om een functie te definiëren die het bovenliggende element wijzigt dat de lijstitems bevat die elk bericht in de feed vertegenwoordigen. Dit kan worden bereikt door nieuwe afbeeldingselementen aan deze container toe te voegen naarmate de gebruiker verder naar beneden scrollt op de pagina, waardoor het weergegeven deel van de feed wordt bijgewerkt met nieuwere berichten.
Selecteer eerst het bovenliggende element:
const productsList = document.querySelector(".products__list");
Maak vervolgens een functie om inhoud toe te voegen.
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
});
}
Tot slot is het nodig om de functie fetch te wijzigen en de opgehaalde informatie door te sturen naar de methode 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;
}
}
De implementatie van een functionaliteit voor oneindig scrollen is inderdaad met succes geïntegreerd, waardoor naadloze navigatie door een schijnbaar eindeloze reeks inhoud mogelijk wordt naarmate men verder de pagina afgaat.
Verbeteringen voor oneindig scrollen
Om de ervaring van de gebruiker te verbeteren, wordt aanbevolen om een laadindicator weer te geven tijdens het ophalen van nieuwe inhoud. Dit kan worden bereikt door de volgende HTML-code op te nemen.
<h1 class="loading-indicator">Loading...</h1>
Selecteer vervolgens het laadelement.
const loadingIndicator = document.querySelector(".loading-indicator");
Implementeer tot slot twee functies die de weergavestatus van de laadindicator regelen met JavaScript.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Voeg ze vervolgens toe aan de fetch-functie.
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;
}
}
Wat het volgende oplevert:
Uw browser ondersteunt de videotag niet.
Goede praktijken voor oneindig scrollen
Enkele best practices die je kunt volgen:
Het is raadzaam om te voorkomen dat een buitensporig aantal items tegelijk wordt opgevraagd, omdat de browser hierdoor kan vastlopen en de algehele efficiëntie kan verminderen.
Om het probleem van frequente netwerkverzoeken veroorzaakt door het onmiddellijk ophalen van inhoud bij het detecteren van een scrollgebeurtenis te beperken, is een benadering het gebruik van een debouncingmechanisme. Door deze techniek toe te passen, wordt het ophalen van inhoud een bepaalde tijd uitgesteld nadat de scrollgebeurtenis heeft plaatsgevonden. Hierdoor wordt het aantal onnodige netwerkverzoeken verminderd en worden de algehele prestaties verbeterd.
Hoewel sommige gebruikers het gemak van oneindig scrollen kunnen waarderen, is het belangrijk om te erkennen dat niet iedereen deze voorkeur deelt. Het aanbieden van een alternatieve optie in de vorm van een paginatiecomponent kan voordelig zijn voor diegenen die dit efficiënter of gebruiksvriendelijker vinden. Uiteindelijk zorgt het aanbieden van beide opties ervoor dat mensen hun surfervaring kunnen aanpassen aan hun individuele behoeften en voorkeuren.
Het zou gepaster zijn om de gebruiker te laten weten wanneer er geen inhoud meer geladen kan worden, in plaats van herhaaldelijk te proberen extra gegevens op te halen.
Mastering Seamless Content Loading
Het opnemen van oneindig scrollen in website-ontwerp biedt een naadloze gebruikerservaring, vooral op mobiele apparaten, die steeds meer voorkomen in het huidige digitale landschap. Door de richtlijnen in dit artikel te volgen, kunnen ontwikkelaars deze functionaliteit effectief integreren in hun webprojecten.
Bij het ontwerpen van een website is het belangrijk om rekening te houden met de emoties van de gebruikers die ermee omgaan. Om een positieve ervaring te bevorderen, moet u voortgangsindicatoren weergeven en duidelijke foutmeldingen geven die gebruikers informeren over eventuele problemen die zich kunnen voordoen tijdens hun interactie met de site.