Home-theater-designers
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.
MUO Videoclipul zilei Derulați PENTRU A CONTINUA CU CONȚINUT
Descoperiți cum să configurați derularea infinită folosind HTML simplu, CSS și JavaScript.
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="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>
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 dvs stil.css fişier:
* {
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
) {
// User is near the bottom, fetch more content
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 defilare, 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; // 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
}
}
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); // Append to productsList container
});
}
Î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.
Îmbunătățiri infinite pentru defilare
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.
cum să împiedicați supraîncălzirea telefonului
<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; // 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;
}
}
Care dă:
Bune practici pentru Infinite Scroll
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 debounce pentru a întârzia ușor preluarea. Acesta poate preveniți solicitările excesive de rețea .
- Nu toți utilizatorii preferă derularea infinită. Oferiți o opțiune pentru utilizați o componentă de paginare dacă se dorește.
- 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ă.