Poznaj zasady i praktyczność nieskończonego przewijania.

Nieskończone przewijanie umożliwia ciągłe ładowanie treści w miarę poruszania się użytkownika w dół strony, w przeciwieństwie do tradycyjnej metody paginacji typu „kliknij, aby załadować”. Ta funkcja może zapewnić płynniejszą obsługę, zwłaszcza na urządzeniach mobilnych.

Dowiedz się, jak skonfigurować nieskończone przewijanie przy użyciu zwykłego HTML, CSS i JavaScript.

Konfiguracja frontendu

Zacznij od podstawowej struktury HTML, aby wyświetlić treść. Oto przykład:

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>

Ta strona zawiera serię obrazów zastępczych i odwołuje się do dwóch zasobów: pliku CSS i pliku JavaScript.

Styl CSS dla przewijanej treści

Aby wyświetlić obrazy zastępcze w siatce, dodaj następujący kod CSS do pliku styl.css plik:

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

W tej chwili Twoja strona powinna wyglądać tak:

Podstawowa implementacja z JS

Edytować skrypt.js. Aby zaimplementować nieskończone przewijanie, musisz wykryć, kiedy użytkownik przewinął w pobliżu dolnej części kontenera treści lub strony.

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

Następnie utwórz funkcję pobierającą więcej danych zastępczych.

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

W tym projekcie możesz użyć API z fałszywestoreapi.

Aby potwierdzić pobieranie danych podczas przewijania, spójrz na konsolę:

Zauważysz, że Twoje dane są pobierane wielokrotnie podczas przewijania, co może mieć wpływ na wydajność urządzenia. Aby temu zapobiec, utwórz początkowy stan pobierania danych:

let isFetching = false;

Następnie zmodyfikuj funkcję pobierania, aby pobierała dane dopiero po zakończeniu poprzedniego pobierania.

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

Wyświetlanie nowej zawartości

Aby wyświetlić nową treść, gdy użytkownik przewija stronę w dół, utwórz funkcję, która dołącza obrazy do kontenera nadrzędnego.

Najpierw wybierz element nadrzędny:

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

Następnie utwórz funkcję dołączającą treść.

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

Na koniec zmodyfikuj funkcję pobierania i przekaż pobrane dane do funkcji dołączania.

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

Dzięki temu Twój nieskończony zwój teraz działa.

Aby poprawić wygodę użytkownika, możesz wyświetlić wskaźnik ładowania podczas pobierania nowej zawartości. Zacznij od dodania tego kodu HTML.

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

Następnie wybierz element ładujący.

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

Na koniec utwórz dwie funkcje, aby przełączać widoczność wskaźnika ładowania.

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

Następnie dodaj je do funkcji pobierania.

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 daje:

Oto niektóre najlepsze praktyki, których należy przestrzegać:

  • Nie pobieraj zbyt wielu przedmiotów jednocześnie. Może to przeciążyć przeglądarkę i obniżyć jej wydajność.
  • Zamiast pobierać zawartość natychmiast po wykryciu zdarzenia przewijania, użyj funkcji odbicia aby nieco opóźnić pobieranie. To może zapobiegać nadmiernym żądaniom sieciowym.
  • Nie wszyscy użytkownicy wolą nieskończone przewijanie. Zaoferuj opcję użyj komponentu paginacji w razie potrzeby.
  • Jeśli nie ma już treści do załadowania, poinformuj o tym użytkownika, zamiast ciągle próbować pobrać więcej treści.

Opanowanie płynnego ładowania treści

Nieskończone przewijanie pozwala użytkownikom płynnie przeglądać zawartość i jest świetne dla osób korzystających z urządzeń mobilnych. Jeśli skorzystasz ze wskazówek i ważnych rad z tego artykułu, możesz dodać tę funkcję do swoich stron internetowych.

Pamiętaj, aby pomyśleć o tym, jak czują się użytkownicy, gdy korzystają z Twojej witryny. Pokazuj znaki postępu i notatki o błędach, aby upewnić się, że użytkownik wie, co się dzieje.