Naučite o načelima i praktičnim stvarima beskonačnog pomicanja.

Beskonačno pomicanje omogućuje kontinuirano učitavanje sadržaja dok se korisnici pomiču niz stranicu, za razliku od metode tradicionalnog označavanja stranica klikom za učitavanje. Ova značajka može ponuditi glatko iskustvo, posebno na mobilnim uređajima.

Otkrijte kako postaviti beskonačno pomicanje pomoću običnog HTML-a, CSS-a i JavaScripta.

Postavljanje sučelja

Započnite s osnovnom HTML strukturom za prikaz vašeg sadržaja. Evo primjera:

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>

Ova stranica sadrži niz slika rezerviranih mjesta i upućuje na dva izvora: CSS datoteku i JavaScript datoteku.

CSS stil za sadržaj koji se može pomicati

Za prikaz slika rezerviranih mjesta u mreži dodajte sljedeći CSS u svoj stil.css datoteka:

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

U ovom trenutku vaša bi stranica trebala izgledati ovako:

Implementacija jezgre s JS-om

Uredi skripta.js. Da biste implementirali beskonačno pomicanje, morate otkriti kada se korisnik pomicao blizu dna spremnika sadržaja ili stranice.

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

Zatim izradite funkciju za dohvaćanje više podataka rezerviranog mjesta.

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

Za ovaj projekt možete koristiti API iz fakestoreapi.

Kako biste potvrdili da se vaši podaci dohvaćaju tijekom pomicanja, pogledajte konzolu:

Primijetit ćete da se vaši podaci dohvaćaju više puta prilikom pomicanja, što može biti faktor koji šteti performansama uređaja. Da biste to spriječili, stvorite početno stanje dohvaćanja podataka:

let isFetching = false;

Zatim promijenite svoju funkciju dohvaćanja tako da dohvaća podatke samo nakon završetka prethodnog dohvaćanja.

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

Prikaz novog sadržaja

Za prikaz novog sadržaja kada se korisnik pomiče prema dolje po stranici, stvorite funkciju koja dodaje slike u nadređeni spremnik.

Prvo odaberite nadređeni element:

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

Zatim izradite funkciju za dodavanje sadržaja.

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

Na kraju, promijenite svoju funkciju dohvaćanja i proslijedite dohvaćene podatke funkciji dodavanja.

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

Uz to, vaš beskonačni svitak sada radi.

Kako biste poboljšali korisničko iskustvo, možete prikazati indikator učitavanja prilikom dohvaćanja novog sadržaja. Započnite dodavanjem ovog HTML-a.

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

Zatim odaberite element za učitavanje.

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

Konačno, stvorite dvije funkcije za promjenu vidljivosti indikatora učitavanja.

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

Zatim ih dodajte u funkciju dohvaćanja.

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

Koji daje:

Neke najbolje prakse koje treba slijediti uključuju:

  • Ne preuzimajte previše predmeta istovremeno. To može preopteretiti preglednik i pogoršati performanse.
  • Umjesto dohvaćanja sadržaja odmah nakon otkrivanja događaja pomicanja, koristiti funkciju odbijanja malo odgoditi dohvaćanje. Ovo može spriječiti prekomjerne mrežne zahtjeve.
  • Ne vole svi korisnici beskonačno pomicanje. Ponudite opciju za koristiti komponentu paginacije ako želiš.
  • Ako više nema sadržaja za učitavanje, obavijestite korisnika umjesto da neprestano pokušavate dohvatiti još sadržaja.

Ovladavanje besprijekornim učitavanjem sadržaja

Beskonačno pomicanje omogućuje korisnicima neometano pregledavanje sadržaja, a odlično je za ljude koji koriste mobilne uređaje. Ako koristite savjete i važne savjete iz ovog članka, možete dodati ovu značajku na svoje web stranice.

Ne zaboravite razmisliti o tome kako se korisnici osjećaju kada koriste vašu stranicu. Prikažite stvari kao što su znakovi napretka i bilješke o pogrešci kako biste bili sigurni da korisnik zna što se događa.