Õppige tundma lõpmatu kerimise põhimõtteid ja praktilisi aspekte.

Lõpmatu kerimine võimaldab sisu pidevalt laadida, kui kasutajad lehel allapoole liiguvad, erinevalt traditsioonilisest lehekülgede lehitsemise klõpsamismeetodist. See funktsioon võib pakkuda sujuvamat kasutuskogemust, eriti mobiilseadmetes.

Avastage, kuidas seadistada lõpmatu kerimine lihtsa HTML-i, CSS-i ja JavaScripti abil.

Frontendi seadistamine

Alustage oma sisu kuvamiseks HTML-i põhistruktuuriga. Siin on näide:

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" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>





instagram viewer

<scriptsrc="script.js">script>
body>
html>

See leht sisaldab hulga kohatäitekujutisi ja viitab kahele ressursile: CSS-failile ja JavaScripti failile.

Keritava sisu CSS-stiil

Kohatäite kujutiste kuvamiseks ruudustikus lisage omale järgmine CSS stiil.css fail:

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

Hetkel peaks teie leht välja nägema selline:

Põhiline juurutamine JS-iga

Muuda script.js. Lõpmatu kerimise rakendamiseks peate tuvastama, millal kasutaja on sisu konteineri või lehe allservas kerinud.

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

Seejärel looge funktsioon rohkemate kohatäiteandmete toomiseks.

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

Selle projekti jaoks saate kasutada API-d alates fakestoreapi.

Andmete kerimise ajal toomise kinnitamiseks vaadake konsooli:

Märkate, et teie andmeid tuuakse kerimisel mitu korda, mis võib olla seadme jõudlust kahjustav tegur. Selle vältimiseks looge andmete esialgne toomise olek:

let isFetching = false;

Seejärel muutke oma toomise funktsiooni nii, et andmed tuuakse alles pärast eelmise toomise lõppu.

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

Uue sisu kuvamine

Uue sisu kuvamiseks, kui kasutaja lehte alla kerib, looge funktsioon, mis lisab pildid emakonteinerisse.

Esmalt valige emaelement:

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

Seejärel looge sisu lisamiseks funktsioon.

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

Lõpuks muutke toomisfunktsiooni ja edastage toodud andmed lisamisfunktsioonile.

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

Ja sellega teie lõputu kerimine nüüd töötab.

Kasutuskogemuse parandamiseks saate uue sisu toomisel kuvada laadimisnäidiku. Alustage selle HTML-i lisamisega.

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

Seejärel valige laadimiselement.

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

Lõpuks looge kaks funktsiooni laadimisnäidiku nähtavuse lülitamiseks.

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

Seejärel lisage need tõmbamisfunktsiooni.

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

Mis annab:

Mõned parimad tavad, mida järgida, on järgmised:

  • Ärge tooge korraga liiga palju üksusi. See võib brauseri üle koormata ja jõudlust halvendada.
  • Selle asemel, et kerimissündmuse tuvastamisel kohe sisu tuua, kasutage tagasilöögifunktsiooni et toomist veidi edasi lükata. See võib vältida liigseid võrgupäringuid.
  • Mitte kõik kasutajad ei eelista lõpmatut kerimist. Pakkuge võimalust kasutage lehekülgede muutmise komponenti soovi korral.
  • Kui laadimiseks pole enam sisu, teavitage sellest kasutajat, selle asemel, et püüda pidevalt rohkem sisu tuua.

Sujuva sisu laadimise valdamine

Lõpmatu kerimine võimaldab kasutajatel sisu sujuvalt sirvida ja see on suurepärane mobiilseadmeid kasutavatele inimestele. Kui kasutate selle artikli näpunäiteid ja olulisi nõuandeid, saate selle funktsiooni oma veebisaitidele lisada.

Ärge unustage mõelda sellele, mida kasutajad teie saiti kasutades tunnevad. Näidake selliseid asju nagu edenemismärgid ja veateated, et kasutaja teaks, mis toimub.