Бесконачно померање омогућава да се садржај непрекидно учитава док се корисници крећу низ страницу, за разлику од метода кликни за учитавање код традиционалног пагинирања. Ова функција може понудити лакше искуство, посебно на мобилним уређајима.
Откријте како да подесите бесконачно померање користећи обичан ХТМЛ, ЦСС и ЈаваСцрипт.
Преглед садржаја
Подешавање фронтенда
Почните са основном ХТМЛ структуром да бисте приказали свој садржај. Ево примера:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1><div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/>
</div><script src="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/script.js"></script>
</body>
</html>
Ова страница садржи низ слика чувара места и упућује на два ресурса: ЦСС датотеку и ЈаваСцрипт датотеку.
ЦСС стил за садржај који се може померати
Да бисте приказали слике чувара места у мрежи, додајте следећи ЦСС у датотеку стиле.цсс:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}html { font-size: 62.5%; }
body {
font-family: Cambria, Times, "Times New Roman", 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
) {
fetchMoreContent();
}
});
Затим креирајте функцију за преузимање више података о чувару места.
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3"); if (!response.ok) {
throw new Error("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;
Затим модификујте функцију преузимања да преузима податке само након завршетка претходног преузимања.
async function fetchMoreContent() {
if (isFetching) return; isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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;
}
}
Приказ новог садржаја
Да бисте приказали нови садржај када корисник скролује низ страницу, креирајте функцију која додаје слике у надређени контејнер.
Прво изаберите родитељски елемент:
const productsList = document.querySelector(".products__list");
Затим креирајте функцију за додавање садржаја.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement);
});
}
Коначно, измените своју функцију преузимања и проследите преузете податке функцији додавања.
async function fetchMoreContent() {
if (isFetching) return; isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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;
}
}
И уз то, ваш бесконачни скрол сада функционише.
Да бисте побољшали корисничко искуство, можете приказати индикатор учитавања приликом преузимања новог садржаја. Започните додавањем овог ХТМЛ-а.
<h1 class="loading-indicator">Loading...</h1>
Затим изаберите елемент за пуњење.
const loadingIndicator = document.querySelector(".loading-indicator");
На крају, креирајте две функције да бисте променили видљивост индикатора учитавања.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Затим их додајте у функцију преузимања.
async function fetchMoreContent() {
if (isFetching) return; isFetching = true;
showLoadingIndicator();
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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();
isFetching = false;
}
}
Који даје:
Неке најбоље праксе које треба следити укључују:
- Не преузимајте превише ставки истовремено. Ово може преоптеретити претраживач и смањити перформансе.
- Уместо преузимања садржаја одмах након откривања догађаја померања, користите функцију за уклањање одбијања да бисте мало одложили преузимање. Ово може спречити прекомерне мрежне захтеве.
- Не воле сви корисници бесконачно померање. Понудите опцију да користите компоненту пагинације ако желите.
- Ако нема више садржаја за учитавање, обавестите корисника уместо да непрестано покушавате да преузмете још садржаја.
Овладавање беспрекорним учитавањем садржаја
Бесконачно померање омогућава корисницима да несметано прегледају садржај и одлично је за људе који користе мобилне уређаје. Ако користите савете и важне савете из овог чланка, можете додати ову функцију на своје веб локације.
Не заборавите да размислите о томе како се корисници осећају када користе вашу веб локацију. Покажите ствари као што су знаци напретка и белешке о грешци да бисте били сигурни да корисник зна шта се дешава.