Сазнајте више о принципима и практичности бесконачног скроловања.

Бесконачно померање омогућава да се садржај непрекидно учитава док се корисници крећу низ страницу, за разлику од метода кликни за учитавање код традиционалног пагинирања. Ова функција може понудити лакше искуство, посебно на мобилним уређајима.

Откријте како да подесите бесконачно померање користећи обичан ХТМЛ, ЦСС и ЈаваСцрипт.

Подешавање фронтенда

Почните са основном ХТМЛ структуром да бисте приказали свој садржај. Ево примера:

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>
<scriptsrc="script.js">script>
body>
html>

Ова страница садржи низ слика чувара места и упућује на два ресурса: ЦСС датотеку и ЈаваСцрипт датотеку.

ЦСС стил за садржај који се може померати

Да бисте приказали слике чувара места у мрежи, додајте следећи ЦСС у свој стиле.цсс фајл:

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

У овом тренутку, ваша страница би требало да изгледа овако:

Основна имплементација са ЈС

Уредити сцрипт.јс. Да бисте применили бесконачно померање, морате да откријете када је корисник скроловао при дну контејнера садржаја или странице.

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

Затим креирајте функцију за преузимање више података о чувару места.

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

За овај пројекат можете користити АПИ из факестореапи.

Да бисте потврдили да се ваши подаци преузимају на померању, погледајте конзолу:

Приметићете да се ваши подаци преузимају више пута приликом померања, што може бити фактор који утиче на перформансе уређаја. Да бисте то спречили, направите почетно стање преузимања података:

let isFetching = false;

Затим модификујте функцију преузимања да преузима податке само након завршетка претходног преузимања.

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

Приказ новог садржаја

Да бисте приказали нови садржај када корисник скролује низ страницу, креирајте функцију која додаје слике у надређени контејнер.

Прво изаберите родитељски елемент:

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

Затим креирајте функцију за додавање садржаја.

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

Коначно, измените своју функцију преузимања и проследите преузете податке функцији додавања.

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

И уз то, ваш бесконачни скрол сада функционише.

Да бисте побољшали корисничко искуство, можете приказати индикатор учитавања приликом преузимања новог садржаја. Започните додавањем овог ХТМЛ-а.

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

Затим изаберите елемент за пуњење.

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

На крају, креирајте две функције да бисте променили видљивост индикатора учитавања.

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

Затим их додајте у функцију преузимања.

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

Који даје:

Неке најбоље праксе које треба следити укључују:

  • Не преузимајте превише ставки истовремено. Ово може преоптеретити претраживач и смањити перформансе.
  • Уместо преузимања садржаја одмах након откривања догађаја померања, користите функцију дебоунце да мало одложи дохват. Ово може спречити прекомерне мрежне захтеве.
  • Не воле сви корисници бесконачно померање. Понудите опцију да користите компоненту пагинације ако је пожељно.
  • Ако нема више садржаја за учитавање, обавестите корисника уместо да непрестано покушавате да преузмете још садржаја.

Овладавање беспрекорним учитавањем садржаја

Бесконачно померање омогућава корисницима да несметано прегледају садржај и одлично је за људе који користе мобилне уређаје. Ако користите савете и важне савете из овог чланка, можете додати ову функцију на своје веб локације.

Не заборавите да размислите о томе како се корисници осећају када користе вашу веб локацију. Покажите ствари као што су знаци напретка и белешке о грешци да бисте били сигурни да корисник зна шта се дешава.