Uzziniet par bezgalīgas ritināšanas principiem un praktiskiem aspektiem.

Bezgalīgā ritināšana ļauj nepārtraukti ielādēt saturu, lietotājiem pārvietojoties pa lapu uz leju, atšķirībā no tradicionālās lappušu veidošanas metodes “noklikšķināt, lai ielādētu”. Šī funkcija var nodrošināt vienmērīgāku pieredzi, īpaši mobilajās ierīcēs.

Uzziniet, kā iestatīt bezgalīgu ritināšanu, izmantojot vienkāršu HTML, CSS un JavaScript.

Priekšgala iestatīšana

Sāciet ar pamata HTML struktūru, lai parādītu savu saturu. Šeit ir piemērs:

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>

Šajā lapā ir ietverta vietturu attēlu sērija un atsauces uz diviem resursiem: CSS failu un JavaScript failu.

CSS stils ritināmam saturam

Lai vietturu attēlus parādītu režģī, pievienojiet tālāk norādīto CSS stils.css fails:

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

Šobrīd jūsu lapai vajadzētu izskatīties šādi:

Pamata ieviešana ar JS

Rediģēt script.js. Lai ieviestu bezgalīgu ritināšanu, jums ir jānosaka, kad lietotājs ir ritinājis satura konteinera vai lapas apakšā.

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

Pēc tam izveidojiet funkciju, lai iegūtu vairāk vietturu datu.

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

Šim projektam varat izmantot API no fakestoreapi.

Lai apstiprinātu, ka ritināšanas laikā tiek iegūti dati, apskatiet konsoli:

Jūs pamanīsit, ka ritināšanas laikā dati tiek izgūti vairākas reizes, kas var būt faktors, kas ietekmē ierīces veiktspēju. Lai to novērstu, izveidojiet sākotnējo datu ielādes stāvokli:

let isFetching = false;

Pēc tam modificējiet izgūšanas funkciju, lai dati tiktu izgūti tikai pēc iepriekšējās ielādes pabeigšanas.

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

Jaunā satura parādīšana

Lai parādītu jaunu saturu, kad lietotājs ritina lapu uz leju, izveidojiet funkciju, kas pievieno attēlus vecākajam konteineram.

Vispirms atlasiet vecāku elementu:

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

Pēc tam izveidojiet funkciju satura pievienošanai.

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

Visbeidzot modificējiet ieneses funkciju un nosūtiet ienestos datus pievienošanas 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;
 }
}

Un līdz ar to jūsu bezgalīgais ritinājums tagad darbojas.

Lai uzlabotu lietotāja pieredzi, ienesot jaunu saturu, varat parādīt ielādes indikatoru. Sāciet, pievienojot šo HTML.

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

Pēc tam atlasiet iekraušanas elementu.

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

Visbeidzot, izveidojiet divas funkcijas, lai pārslēgtu ielādes indikatora redzamību.

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

Pēc tam pievienojiet tos ieneses funkcijai.

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 dod:

Dažas labākās prakses, kas jāievēro:

  • Neatnesiet pārāk daudz priekšmetu vienlaikus. Tas var pārslogot pārlūkprogrammu un pasliktināt veiktspēju.
  • Tā vietā, lai nekavējoties ienestu saturu pēc ritināšanas notikuma noteikšanas, izmantojiet debounce funkciju lai nedaudz aizkavētu ielādi. Šis var novērstu pārmērīgus tīkla pieprasījumus.
  • Ne visi lietotāji dod priekšroku bezgalīgai ritināšanai. Piedāvājiet iespēju izmantojiet lappuses komponentu ja vēlas.
  • Ja ielādējamā satura vairs nav, informējiet lietotāju, nevis nepārtraukti mēģiniet ienest vairāk satura.

Nevainojama satura ielādes apgūšana

Bezgalīga ritināšana ļauj lietotājiem netraucēti pārlūkot saturu, un tas ir lieliski piemērots cilvēkiem, kuri izmanto mobilās ierīces. Ja izmantojat šajā rakstā sniegtos padomus un svarīgus padomus, varat pievienot šo funkciju savām vietnēm.

Atcerieties padomāt par to, kā lietotāji jūtas, kad viņi izmanto jūsu vietni. Rādiet tādas lietas kā progresa zīmes un kļūdu piezīmes, lai pārliecinātos, ka lietotājs zina, kas notiek.