Sužinokite apie begalinio slinkimo principus ir praktinius dalykus.

Begalinis slinkimas leidžia nepertraukiamai įkelti turinį, kai naudotojai juda puslapiu žemyn, kitaip nei naudojant tradicinio puslapių rūšiavimo spustelėjus ir įkeliant metodą. Ši funkcija gali pasiūlyti sklandesnę patirtį, ypač mobiliuosiuose įrenginiuose.

Sužinokite, kaip nustatyti begalinį slinkimą naudojant paprastą HTML, CSS ir JavaScript.

Frontend nustatymas

Norėdami rodyti turinį, pradėkite nuo pagrindinės HTML struktūros. Štai pavyzdys:

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>

Šiame puslapyje yra vietos rezervavimo vaizdų serija ir nurodomi du ištekliai: CSS failas ir JavaScript failas.

Slenkamo turinio CSS stilius

Jei norite, kad rezervuotos vietos vaizdai būtų rodomi tinklelyje, prie savo pridėkite šį CSS stilius.css failas:

* {
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%);
}

Šiuo metu jūsų puslapis turėtų atrodyti taip:

Pagrindinis įgyvendinimas naudojant JS

Redaguoti script.js. Norėdami įdiegti begalinį slinkimą, turite aptikti, kada naudotojas slinko šalia turinio sudėtinio rodinio arba puslapio apačios.

"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
 ) {
// User is near the bottom, fetch more content
 fetchMoreContent();
 }
});

Tada sukurkite funkciją, kad gautumėte daugiau rezervuotos vietos duomenų.

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

Šiam projektui galite naudoti API iš fakestoreapi.

Norėdami patvirtinti, kad duomenys gaunami slenkant, pažiūrėkite į pultą:

Pastebėsite, kad jūsų duomenys slenkant gaunami kelis kartus, o tai gali būti veiksnys, kuris neigiamai veikia įrenginio veikimą. Norėdami to išvengti, sukurkite pradinę duomenų gavimo būseną:

let isFetching = false;

Tada pakeiskite gavimo funkciją, kad duomenys būtų gauti tik pasibaigus ankstesniam gavimui.

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
 }
}

Naujo turinio rodymas

Kad būtų rodomas naujas turinys, kai vartotojas slenka puslapiu žemyn, sukurkite funkciją, kuri prideda vaizdus prie pirminio sudėtinio rodinio.

Pirmiausia pasirinkite pagrindinį elementą:

const productsList = document.querySelector(".products__list");

Tada sukurkite turinio pridėjimo funkciją.

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

Galiausiai pakeiskite gavimo funkciją ir perduokite gautus duomenis pridėjimo funkcijai.

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

Be to, jūsų begalinis slinktis dabar veikia.

Norėdami pagerinti naudotojo patirtį, gaudami naują turinį galite rodyti įkėlimo indikatorių. Pradėkite pridėdami šį HTML.

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

Tada pasirinkite pakrovimo elementą.

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

Galiausiai sukurkite dvi funkcijas, kad perjungtumėte pakrovimo indikatoriaus matomumą.

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

Tada pridėkite juos prie gavimo funkcijos.

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

Kas suteikia:

Keletas geriausių praktikų, kurių reikia laikytis:

  • Neimkite per daug daiktų vienu metu. Tai gali apsunkinti naršyklę ir pabloginti našumą.
  • Užuot gavęs turinį iš karto aptikus slinkties įvykį, naudoti debounce funkciją kad šiek tiek atidėtų atsiėmimą. Tai gali užkirsti kelią pernelyg didelėms tinklo užklausoms.
  • Ne visi vartotojai teikia pirmenybę begaliniam slinkimui. Pasiūlykite galimybę naudokite puslapių kūrimo komponentą jei pageidaujama.
  • Jei nebėra įkeliamo turinio, informuokite vartotoją, o ne nuolat bandydami gauti daugiau turinio.

Įvaldykite sklandų turinio įkėlimą

Begalinis slinkimas leidžia vartotojams sklandžiai naršyti turinį, be to, jis puikiai tinka žmonėms, naudojantiems mobiliuosius įrenginius. Jei pasinaudosite šio straipsnio patarimais ir svarbiais patarimais, šią funkciją galite įtraukti į savo svetaines.

Nepamirškite pagalvoti, kaip jaučiasi vartotojai, naudodamiesi jūsų svetaine. Rodykite tokius dalykus kaip pažangos ženklai ir klaidų pastabos, kad įsitikintumėte, jog vartotojas žino, kas vyksta.