Jak zaimplementować Infinite Scroll w aplikacji internetowej?
Nieskończone przewijanie pozwala na ciągłe ładowanie treści, gdy użytkownicy poruszają się w dół strony, w przeciwieństwie do metody klikania w celu załadowania tradycyjnej paginacji. Ta funkcja może zapewnić płynniejsze wrażenia, zwłaszcza na urządzeniach mobilnych.
Zapoznaj się z procesem implementacji nieskończenie przewijanego interfejsu przy użyciu podstawowego HTML, stylistycznego CSS i wszechstronnych technik JavaScript.
Konfigurowanie frontendu
Wykorzystaj podstawową strukturę HTML do wyświetlania treści. Przykład jest następujący:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="script.js"></script>
</body>
</html>
plik kaskadowych arkuszy stylów (CSS) i plik JavaScript (JS).
Stylizacja CSS dla przewijanej zawartości
Aby zaprezentować grafikę zastępczą w układzie przypominającym siatkę, dołącz następujące reguły stylistyczne do pliku “style.css”:
* {
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%);
}
Obecnie wygląd strony powinien przypominać układ i projekt przedstawiony poniżej:
Podstawowa implementacja z JS
Aby skutecznie włączyć funkcję nieskończonego przewijania do aplikacji internetowej, kluczowe jest monitorowanie bliskości użytkownika do podstawy obszaru treści lub całej strony internetowej. Można to osiągnąć, wykorzystując JavaScript i CSS do obserwowania pozycji zdarzenia przewijania względem wysokości rzutni i odpowiednio wyzwalając odpowiednie działania.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY \\+ window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Na początek opracujemy funkcję, która pobiera dodatkowe dane zastępcze. Można to osiągnąć poprzez implementację wywołania API lub wykorzystanie zapytania do bazy danych, w zależności od konkretnych wymagań aplikacji. Pobrane dane zostaną następnie wykorzystane jako dane wejściowe do dalszego przetwarzania i wyświetlania w interfejsie użytkownika.
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");
}
}
W tym projekcie można użyć interfejsu API z fakestoreapi .
Aby sprawdzić, czy dane są pobierane podczas przewijania strony, zaleca się sprawdzenie konsoli programisty przeglądarki pod kątem jakichkolwiek danych wyjściowych lub wskazań powodzenia w pobieraniu danych. Może to dostarczyć przydatnych spostrzeżeń i informacji zwrotnych dotyczących funkcjonalności skryptu.
W celu złagodzenia potencjalnych problemów z wydajnością wynikających z powtarzającego się pobierania danych podczas przewijania, zaleca się ustanowienie początkowego stanu ładowania informacji, zapewniając w ten sposób wydajne działanie urządzenia.
let isFetching = false;
W celu zapewnienia, że pobieranie danych jest wykonywane w efektywny sposób, konieczna jest modyfikacja implementacji funkcji fetch , tak aby kontynuować pobieranie informacji dopiero po pomyślnym zakończeniu jej poprzednika. Można to osiągnąć poprzez wprowadzenie dodatkowej logiki w kodzie do monitorowania i zarządzania przepływem wykonywania wielu współbieżnych żądań, zapobiegając w ten sposób potencjalnym wąskim gardłom lub opóźnieniom, które mogą powstać w wyniku jednoczesnych operacji na współdzielonych zasobach.
async function fetchMoreContent() {
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) {
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; // Reset the flag to false
}
}
Wyświetlanie nowej zawartości
Aby dynamicznie aktualizować wizualną reprezentację kanału wiadomości, gdy użytkownik go przewija, jednym z podejść jest zdefiniowanie funkcji, która modyfikuje element nadrzędny zawierający elementy listy reprezentujące każdy post w kanale. Można to osiągnąć poprzez dołączanie nowych elementów obrazu do tego kontenera, gdy użytkownik przewija stronę dalej w dół, skutecznie aktualizując wyświetlaną część kanału o nowsze posty.
Najpierw wybierz element nadrzędny:
const productsList = document.querySelector(".products__list");
Następnie utwórz funkcję dołączającą zawartość.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}
Podsumowując, należy zmienić funkcję fetch i przekazać pobrane informacje do metody append .
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;
}
}
Rzeczywiście, implementacja funkcji nieskończonego przewijania została pomyślnie zintegrowana, umożliwiając w ten sposób płynną nawigację po pozornie nieskończonej gamie treści w miarę przechodzenia w dół strony.
Infinite Scroll Enhancements
Aby poprawić wrażenia użytkownika, zaleca się wyświetlanie wskaźnika ładowania podczas pobierania świeżej zawartości. Można to osiągnąć poprzez włączenie następującego kodu HTML.
<h1 class="loading-indicator">Loading...</h1>
Następnie wybierz element ładowania.
const loadingIndicator = document.querySelector(".loading-indicator");
Podsumowując, zaimplementuj dwie funkcje, które kontrolują stan wyświetlania wskaźnika ładowania za pomocą JavaScript.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Następnie dodaj je do funkcji pobierania.
async function fetchMoreContent() {
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) {
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(); // Hide loader
isFetching = false;
}
}
Co daje:
Twoja przeglądarka nie obsługuje tagu wideo.
Dobre praktyki dla nieskończonego przewijania
Niektóre najlepsze praktyki do naśladowania obejmują:
Zaleca się unikanie żądania nadmiernej liczby elementów naraz, ponieważ może to spowodować zablokowanie przeglądarki i zmniejszenie ogólnej wydajności.
Aby złagodzić kwestię częstych żądań sieciowych spowodowanych natychmiastowym pobieraniem zawartości po wykryciu zdarzenia przewijania, jednym z podejść jest wykorzystanie mechanizmu debouncingu. Stosując tę technikę, operacja pobierania zawartości zostanie opóźniona o pewien okres czasu po wystąpieniu zdarzenia przewijania. W rezultacie pomaga to zmniejszyć liczbę niepotrzebnych żądań sieciowych i poprawić ogólną wydajność.
Podczas gdy niektórzy użytkownicy mogą docenić wygodę nieskończonego przewijania, ważne jest, aby pamiętać, że nie wszyscy podzielają te preferencje. Zapewnienie alternatywnej opcji w postaci komponentu paginacji może być korzystne dla tych, którzy uważają ją za bardziej wydajną lub przyjazną dla użytkownika. Ostatecznie, oferowanie obu opcji pozwala użytkownikom dostosować sposób przeglądania do ich indywidualnych potrzeb i preferencji.
Bardziej odpowiednie byłoby powiadomienie użytkownika, gdy nie ma już treści do załadowania, zamiast wielokrotnych prób pobierania dodatkowych danych.
Opanowanie płynnego ładowania treści
Włączenie nieskończonego przewijania do projektu strony internetowej zapewnia płynne wrażenia użytkownika, szczególnie na urządzeniach mobilnych, które stają się coraz bardziej powszechne w dzisiejszym cyfrowym krajobrazie. Przestrzegając wytycznych zawartych w tym artykule, programiści mogą skutecznie zintegrować tę funkcjonalność ze swoimi projektami internetowymi.
Podczas projektowania strony internetowej ważne jest, aby wziąć pod uwagę emocje użytkowników, którzy będą z nią wchodzić w interakcje. Aby ułatwić pozytywne doświadczenia, wyświetlaj wskaźniki postępu i dostarczaj jasne komunikaty o błędach, które informują użytkowników o wszelkich problemach, które mogą pojawić się podczas interakcji z witryną.