Home-theater-designers
Nekonečné posúvanie umožňuje nepretržité načítavanie obsahu, keď sa používatelia pohybujú po stránke nadol, na rozdiel od metódy kliknutia a načítania pri tradičnom stránkovaní. Táto funkcia môže ponúknuť plynulejší zážitok, najmä na mobilných zariadeniach.
ako uložiť obrázky z pinterestuMUO Video dňa POKRAČUJTE V OBSAHU POKRAČOVANÍM
Zistite, ako nastaviť nekonečné posúvanie pomocou jednoduchého HTML, CSS a JavaScriptu.
Nastavenie frontendu
Na zobrazenie obsahu začnite so základnou štruktúrou HTML. Tu je príklad:
<!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>
Táto stránka obsahuje sériu zástupných obrázkov a odkazuje na dva zdroje: súbor CSS a súbor JavaScript.
Štýl CSS pre posúvateľný obsah
Ak chcete zobraziť zástupné obrázky v mriežke, pridajte do svojej šablóny nasledujúci CSS style.css súbor:
* {
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%);
}
V súčasnosti by mala vaša stránka vyzerať takto:
Implementácia jadra s JS
Upraviť script.js . Ak chcete implementovať nekonečné posúvanie, musíte zistiť, kedy sa používateľ posúval blízko spodnej časti kontajnera obsahu alebo stránky.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Potom vytvorte funkciu na načítanie ďalších zástupných údajov.
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");
}
}
Pre tento projekt môžete použiť API od fakestoreapi .
Ak chcete potvrdiť, že sa vaše údaje načítavajú pri posúvaní, pozrite sa na konzolu:
najlepšia bezplatná aplikácia pre živé televízne vysielanie pre Android
Všimnete si, že vaše údaje sa pri posúvaní načítavajú viackrát, čo môže byť faktor, ktorý zhoršuje výkon zariadenia. Aby ste tomu zabránili, vytvorte počiatočný stav načítania údajov:
let isFetching = false;
Potom upravte svoju funkciu načítania tak, aby načítala údaje až po dokončení predchádzajúceho načítania.
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
}
}
Zobrazenie nového obsahu
Ak chcete zobraziť nový obsah, keď používateľ posúva stránku nadol, vytvorte funkciu, ktorá pripojí obrázky k nadradenému kontajneru.
Najprv vyberte nadradený prvok:
const productsList = document.querySelector(".products__list");
Potom vytvorte funkciu na pripojenie obsahu.
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
});
}
Nakoniec upravte svoju funkciu načítania a odovzdajte načítané údaje do funkcie pripojenia.
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;
}
}
A s tým teraz funguje váš nekonečný zvitok.
Vylepšenia nekonečného posúvania
Na zlepšenie používateľského zážitku môžete pri načítavaní nového obsahu zobraziť indikátor načítania. Začnite pridaním tohto kódu HTML.
ako vytvoriť netopierový súbor v systéme Windows 10
<h1 class="loading-indicator">Loading...</h1>
Potom vyberte nakladací prvok.
const loadingIndicator = document.querySelector(".loading-indicator");
Nakoniec vytvorte dve funkcie na prepínanie viditeľnosti indikátora načítania.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Potom ich pridajte do funkcie načítania.
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;
}
}
Čo dáva:
Dobré postupy pre Infinite Scroll
Niektoré osvedčené postupy, ktoré treba dodržiavať, zahŕňajú:
- Nenačítajte príliš veľa položiek súčasne. To môže zahltiť prehliadač a znížiť výkon.
- Namiesto načítania obsahu ihneď po zistení udalosti posúvania, použite funkciu debounce mierne oddialiť aport. Toto môže zabrániť nadmerným sieťovým požiadavkám .
- Nie všetci používatelia preferujú nekonečné posúvanie. Ponúknite možnosť použiť komponent stránkovania ak je to žiaduce.
- Ak už nie je možné načítať žiadny ďalší obsah, informujte používateľa namiesto neustáleho pokusu o načítanie ďalšieho obsahu.
Zvládnutie bezproblémového načítania obsahu
Nekonečné posúvanie umožňuje používateľom plynulo prehliadať obsah a je skvelé pre ľudí používajúcich mobilné zariadenia. Ak využijete tipy a dôležité rady z tohto článku, môžete túto funkciu pridať na svoje webové stránky.
Nezabudnite myslieť na to, ako sa používatelia cítia, keď používajú vašu stránku. Zobrazujte veci ako znaky priebehu a chybové poznámky, aby ste sa uistili, že používateľ vie, čo sa deje.