Seznamte se s principy a praktickými vlastnostmi nekonečného rolování.

Nekonečné posouvání umožňuje načítání obsahu nepřetržitě, jak se uživatelé pohybují po stránce, na rozdíl od tradiční metody stránkování kliknutím a načtení. Tato funkce může nabídnout plynulejší zážitek, zejména na mobilních zařízeních.

Zjistěte, jak nastavit nekonečné posouvání pomocí prostého HTML, CSS a JavaScriptu.

Nastavení frontendu

Chcete-li zobrazit svůj obsah, začněte se základní strukturou HTML. Zde je pří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>

Tato stránka obsahuje řadu zástupných obrázků a odkazuje na dva zdroje: soubor CSS a soubor JavaScript.

Styl CSS pro rolovatelný obsah

Chcete-li zobrazit zástupné obrázky v mřížce, přidejte do svého souboru následující CSS styl.css soubor:

* {
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 tuto chvíli by vaše stránka měla vypadat takto:

Implementace jádra s JS

Upravit script.js. Chcete-li implementovat nekonečné posouvání, musíte zjistit, kdy se uživatel posunul poblíž spodní části kontejneru obsahu nebo 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 vytvořte funkci pro načtení dalších zástupných dat.

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

Pro tento projekt můžete použít API od fakestoreapi.

Chcete-li potvrdit, že se vaše data načítají při posouvání, podívejte se na konzolu:

Všimnete si, že vaše data se při posouvání načítají několikrát, což může být faktor, který snižuje výkon zařízení. Chcete-li tomu zabránit, vytvořte počáteční stav načítání dat:

let isFetching = false;

Poté upravte funkci načítání tak, aby načítala data pouze po dokončení předchozího načítání.

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

Zobrazení nového obsahu

Chcete-li zobrazit nový obsah, když uživatel posouvá stránku dolů, vytvořte funkci, která obrázky připojí k nadřazenému kontejneru.

Nejprve vyberte nadřazený prvek:

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

Poté vytvořte funkci pro připojení 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
 });
}

Nakonec upravte svou funkci načtení a předejte načtená data funkci append.

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 váš nekonečný svitek nyní funguje.

Chcete-li zlepšit uživatelský komfort, můžete při načítání nového obsahu zobrazit indikátor načítání. Začněte přidáním tohoto HTML.

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

Poté vyberte nakládací prvek.

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

Nakonec vytvořte dvě funkce pro přepínání viditelnosti indikátoru zatížení.

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

Poté je přidejte do funkce načítání.

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

Což dává:

Mezi doporučené postupy patří:

  • Nevytahujte příliš mnoho položek současně. To může zahltit prohlížeč a snížit výkon.
  • Namísto načítání obsahu ihned po zjištění události posouvání použijte funkci debounce mírně zpozdit aport. To může zabránit nadměrným síťovým požadavkům.
  • Ne všichni uživatelé preferují nekonečné posouvání. Nabídněte možnost použít stránkovací komponentu pokud je to žádoucí.
  • Pokud již není možné načíst žádný další obsah, informujte uživatele, místo aby se neustále pokoušeli načíst další obsah.

Zvládnutí bezproblémového načítání obsahu

Nekonečné posouvání umožňuje uživatelům plynule procházet obsah a je skvělé pro uživatele mobilních zařízení. Pokud využijete tipy a důležité rady z tohoto článku, můžete tuto funkci přidat na své weby.

Nezapomeňte myslet na to, jak se uživatelé cítí, když používají váš web. Zobrazujte věci jako znaky průběhu a chybové poznámky, abyste se ujistili, že uživatel ví, co se děje.