Získajte informácie o princípoch a praktických vlastnostiach nekonečného rolovania.

Nekonečné posúvanie umožňuje nepretržité načítavanie obsahu, keď sa používatelia pohybujú po stránke nadol, na rozdiel od metódy kliknutia a načítania pri tradičnom stránkovaní. Táto funkcia môže ponúknuť plynulejší zážitok, najmä na mobilných zariadeniach.

Zistite, ako nastaviť nekonečné posúvanie pomocou jednoduchého HTML, CSS a JavaScriptu.

Nastavenie frontendu

Na zobrazenie obsahu začnite so základnou štruktúrou HTML. Tu je príklad:

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>

Táto stránka obsahuje sériu zástupných obrázkov a odkazuje na dva zdroje: súbor CSS a súbor JavaScript.

Štýl CSS pre posúvateľný obsah

Ak chcete zobraziť zástupné obrázky v mriežke, pridajte do svojej šablóny nasledujúci CSS style.css súbor:

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

V súčasnosti by mala vaša stránka vyzerať takto:

Implementácia jadra s JS

Upraviť script.js. Ak chcete implementovať nekonečné posúvanie, musíte zistiť, kedy sa používateľ posúval blízko spodnej časti kontajnera obsahu alebo stránky.

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

Potom vytvorte funkciu na načítanie ďalších zástupných údajov.

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

Pre tento projekt môžete použiť API od fakestoreapi.

Ak chcete potvrdiť, že sa vaše údaje načítavajú pri posúvaní, pozrite sa na konzolu:

Všimnete si, že vaše údaje sa pri posúvaní načítavajú viackrát, čo môže byť faktor, ktorý zhoršuje výkon zariadenia. Aby ste tomu zabránili, vytvorte počiatočný stav načítania údajov:

let isFetching = false;

Potom upravte svoju funkciu načítania tak, aby načítala údaje až po dokončení predchádzajúceho načítania.

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

Zobrazenie nového obsahu

Ak chcete zobraziť nový obsah, keď používateľ posúva stránku nadol, vytvorte funkciu, ktorá pripojí obrázky k nadradenému kontajneru.

Najprv vyberte nadradený prvok:

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

Potom vytvorte funkciu na pripojenie obsahu.

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

Nakoniec upravte svoju funkciu načítania a odovzdajte načítané údaje do funkcie pripojenia.

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

A s tým teraz funguje váš nekonečný zvitok.

Na zlepšenie používateľského zážitku môžete pri načítavaní nového obsahu zobraziť indikátor načítania. Začnite pridaním tohto kódu HTML.

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

Potom vyberte nakladací prvok.

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

Nakoniec vytvorte dve funkcie na prepínanie viditeľnosti indikátora načítania.

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

Potom ich pridajte do funkcie načítania.

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

Čo dáva:

Niektoré osvedčené postupy, ktoré treba dodržiavať, zahŕňajú:

  • Nenačítajte príliš veľa položiek súčasne. To môže zahltiť prehliadač a znížiť výkon.
  • Namiesto načítania obsahu ihneď po zistení udalosti posúvania, použite funkciu debounce mierne oddialiť aport. Toto môže zabrániť nadmerným sieťovým požiadavkám.
  • Nie všetci používatelia preferujú nekonečné posúvanie. Ponúknite možnosť použiť komponent stránkovania ak je to žiaduce.
  • Ak už nie je možné načítať žiadny ďalší obsah, informujte používateľa namiesto neustáleho pokusu o načítanie ďalšieho obsahu.

Zvládnutie bezproblémového načítania obsahu

Nekonečné posúvanie umožňuje používateľom plynulo prehliadať obsah a je skvelé pre ľudí používajúcich mobilné zariadenia. Ak využijete tipy a dôležité rady z tohto článku, môžete túto funkciu pridať na svoje webové stránky.

Nezabudnite myslieť na to, ako sa používatelia cítia, keď používajú vašu stránku. Zobrazujte veci ako znaky priebehu a chybové poznámky, aby ste sa uistili, že používateľ vie, čo sa deje.