Home-theater-designers
Lõpmatu kerimine võimaldab sisu pidevalt laadida, kui kasutajad lehel allapoole liiguvad, erinevalt traditsioonilisest lehekülgede lehitsemise klõpsamismeetodist. See funktsioon võib pakkuda sujuvamat kasutuskogemust, eriti mobiilseadmetes.
MUO päeva video SISUGA JÄTKAMISEKS KERIMISE
Avastage, kuidas seadistada lõpmatu kerimine lihtsa HTML-i, CSS-i ja JavaScripti abil.
Frontendi seadistamine
Alustage oma sisu kuvamiseks HTML-i põhistruktuuriga. Siin on näide:
<!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>
See leht sisaldab hulga kohatäitekujutisi ja viitab kahele ressursile: CSS-failile ja JavaScripti failile.
Keritava sisu CSS-stiil
Kohatäite kujutiste kuvamiseks ruudustikus lisage omale järgmine CSS stiil.css fail:
kui vana sa pead olema, et paypalit kasutada
* {
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%);
}
Hetkel peaks teie leht välja nägema selline:
Põhiline juurutamine JS-iga
Muuda script.js . Lõpmatu kerimise rakendamiseks peate tuvastama, millal kasutaja on sisu konteineri või lehe allservas kerinud.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Seejärel looge funktsioon rohkemate kohatäiteandmete toomiseks.
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");
}
}
Selle projekti jaoks saate kasutada API-d alates fakestoreapi .
Andmete kerimise ajal toomise kinnitamiseks vaadake konsooli:
Märkate, et teie andmeid tuuakse kerimisel mitu korda, mis võib olla seadme jõudlust kahjustav tegur. Selle vältimiseks looge andmete esialgne toomise olek:
let isFetching = false;
Seejärel muutke oma toomise funktsiooni nii, et andmed tuuakse alles pärast eelmise toomise lõppu.
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
}
}
Uue sisu kuvamine
Uue sisu kuvamiseks, kui kasutaja lehte alla kerib, looge funktsioon, mis lisab pildid emakonteinerisse.
Esmalt valige emaelement:
const productsList = document.querySelector(".products__list");
Seejärel looge sisu lisamiseks funktsioon.
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
});
}
Lõpuks muutke toomisfunktsiooni ja edastage toodud andmed lisamisfunktsioonile.
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;
}
}
Ja sellega teie lõputu kerimine nüüd töötab.
Lõpmatu kerimise täiustused
Kasutuskogemuse parandamiseks saate uue sisu toomisel kuvada laadimisnäidiku. Alustage selle HTML-i lisamisega.
<h1 class="loading-indicator">Loading...</h1>
Seejärel valige laadimiselement.
const loadingIndicator = document.querySelector(".loading-indicator");
Lõpuks looge kaks funktsiooni laadimisnäidiku nähtavuse lülitamiseks.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Seejärel lisage need tõmbamisfunktsiooni.
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;
}
}
Mis annab:
Lõpmatu kerimise head tavad
Mõned parimad tavad, mida järgida, on järgmised:
- Ärge tooge korraga liiga palju üksusi. See võib brauseri üle koormata ja jõudlust halvendada.
- Selle asemel, et kerimissündmuse tuvastamisel kohe sisu tuua, kasutage tagasilöögifunktsiooni toomist veidi edasi lükata. See võib vältida liigseid võrgupäringuid .
- Mitte kõik kasutajad ei eelista lõpmatut kerimist. Pakkuge võimalust kasutage lehekülgede muutmise komponenti soovi korral.
- Kui laadimiseks pole enam sisu, teavitage sellest kasutajat, selle asemel, et püüda pidevalt rohkem sisu tuua.
Sujuva sisu laadimise valdamine
Lõpmatu kerimine võimaldab kasutajatel sisu sujuvalt sirvida ja see on suurepärane mobiilseadmeid kasutavatele inimestele. Kui kasutate selle artikli näpunäiteid ja olulisi nõuandeid, saate selle funktsiooni oma veebisaitidele lisada.
Ärge unustage mõelda sellele, mida kasutajad teie saiti kasutades tunnevad. Näidake selliseid asju nagu edenemismärgid ja veateated, et kasutaja teaks, mis toimub.