Derularea infinită permite conținutului să se încarce continuu pe măsură ce utilizatorii se deplasează în jos pe pagină, spre deosebire de metoda de paginare tradițională prin clic pentru încărcare. Această caracteristică poate oferi o experiență mai lină, în special pe dispozitivele mobile.
Descoperiți cum să configurați derularea infinită folosind HTML simplu, CSS și JavaScript.
Cuprins
Configurarea front-end-ului
Începeți cu o structură HTML de bază pentru a vă afișa conținutul. Iată un exemplu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1><div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/>
</div><script src="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/script.js"></script>
</body>
</html>
Această pagină conține o serie de imagini substituenți și face referire la două resurse: un fișier CSS și un fișier JavaScript.
Stilul CSS pentru conținut care poate fi derulat
Pentru a afișa imaginile substituent într-o grilă, adăugați următorul CSS la fișierul style.css:
* {
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%);
}
În acest moment, pagina dvs. ar trebui să arate astfel:
Implementarea de bază cu JS
Editați script.js. Pentru a implementa derularea infinită, trebuie să detectați când utilizatorul a derulat în partea de jos a containerului de conținut sau a paginii.
"use strict";window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
fetchMoreContent();
}
});
Apoi, creați o funcție pentru a prelua mai multe date de substituent.
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");
}
}
Pentru acest proiect, puteți utiliza API-ul de la fakestoreapi.
Pentru a confirma că datele dvs. sunt preluate prin defilare, aruncați o privire pe consolă:
Veți observa că datele dvs. sunt preluate de mai multe ori pe derulare, ceea ce poate fi un factor care dăunează performanței dispozitivului. Pentru a preveni acest lucru, creați o stare inițială de preluare a datelor:
let isFetching = false;
Apoi, modificați funcția de preluare pentru a prelua date numai după ce s-a terminat o preluare anterioară.
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();
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false;
}
}
Afișarea conținutului nou
Pentru a afișa conținut nou atunci când utilizatorul derulează în jos pe pagină, creați o funcție care atașează imaginile la containerul părinte.
Mai întâi, selectați elementul părinte:
const productsList = document.querySelector(".products__list");
Apoi, creați o funcție pentru a adăuga conținut.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement);
});
}
În cele din urmă, modificați funcția de preluare și transmiteți datele preluate funcției de adăugare.
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;
}
}
Și cu asta, derularea ta infinită funcționează acum.
Pentru a îmbunătăți experiența utilizatorului, puteți afișa un indicator de încărcare atunci când preluați conținut nou. Începeți prin a adăuga acest HTML.
<h1 class="loading-indicator">Loading...</h1>
Apoi selectați elementul de încărcare.
const loadingIndicator = document.querySelector(".loading-indicator");
În cele din urmă, creați două funcții pentru a comuta vizibilitatea indicatorului de încărcare.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Apoi, adăugați-le la funcția de preluare.
async function fetchMoreContent() {
if (isFetching) return; isFetching = true;
showLoadingIndicator();
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();
isFetching = false;
}
}
Care dă:
Unele dintre cele mai bune practici de urmat includ:
- Nu aduceți prea multe articole simultan. Acest lucru poate copleși browserul și poate degrada performanța.
- În loc să preluați conținut imediat după detectarea unui eveniment de defilare, utilizați o funcție de deblocare pentru a întârzia ușor preluarea. Acest lucru poate preveni solicitările excesive de rețea.
- Nu toți utilizatorii preferă derularea infinită. Oferiți o opțiune de utilizare a unei componente de paginare, dacă doriți.
- Dacă nu mai există conținut de încărcat, informați utilizatorul în loc să încercați continuu să preia mai mult conținut.
Stăpânirea încărcării fără întreruperi a conținutului
Derularea infinită permite utilizatorilor să răsfoiască fără probleme conținutul și este grozav pentru persoanele care folosesc dispozitive mobile. Dacă utilizați sfaturile și sfaturile importante din acest articol, puteți adăuga această funcție pe site-urile dvs. web.
Nu uitați să vă gândiți la felul în care se simt utilizatorii când vă folosesc site-ul. Afișați lucruri precum semne de progres și note de eroare pentru a vă asigura că utilizatorul știe ce se întâmplă.