Home-theater-designers
El desplaçament infinit permet que el contingut es carregui contínuament a mesura que els usuaris es mouen per la pàgina, a diferència del mètode de clic per carregar de la paginació tradicional. Aquesta funció pot oferir una experiència més fluida, especialment en dispositius mòbils.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
Descobriu com configurar el desplaçament infinit mitjançant HTML senzill, CSS i JavaScript.
Configuració del Frontend
Comenceu amb una estructura HTML bàsica per mostrar el vostre contingut. Aquí teniu un exemple:
<!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>
Aquesta pàgina conté una sèrie d'imatges de marcador de posició i fa referència a dos recursos: un fitxer CSS i un fitxer JavaScript.
Estil CSS per a contingut desplaçable
Per mostrar les imatges de marcador de posició en una quadrícula, afegiu el següent CSS al vostre estil.css dossier:
* {
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%);
}
De moment, la teva pàgina hauria de tenir aquest aspecte:
Implementació bàsica amb JS
Edita script.js . Per implementar el desplaçament infinit, heu de detectar quan l'usuari s'ha desplaçat a prop de la part inferior del contenidor o de la pàgina de contingut.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
A continuació, creeu una funció per obtenir més dades de marcador de posició.
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");
}
}
Per a aquest projecte, podeu utilitzar l'API de falstoreapi .
Per confirmar que les vostres dades s'estan obtenint al desplaçament, feu una ullada a la consola:
Notareu que les vostres dades s'estan obtenint diverses vegades al desplaçament, cosa que pot ser un factor que perjudiqui el rendiment del dispositiu. Per evitar-ho, creeu un estat de recuperació inicial de les dades:
let isFetching = false;
A continuació, modifiqueu la vostra funció d'obtenció per obtenir dades només un cop hagi finalitzat una recuperació anterior.
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
}
}
Visualització del nou contingut
Per mostrar contingut nou quan l'usuari es desplaça cap avall per la pàgina, creeu una funció que afegeixi les imatges al contenidor principal.
Primer, seleccioneu l'element principal:
const productsList = document.querySelector(".products__list");
A continuació, creeu una funció per afegir contingut.
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
});
}
Finalment, modifiqueu la vostra funció d'obtenció i passeu les dades obtingudes a la funció d'afegir.
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;
}
}
I amb això, el vostre desplaçament infinit ara funciona.
Millores de desplaçament infinit
Per millorar l'experiència de l'usuari, podeu mostrar un indicador de càrrega quan obteniu contingut nou. Comenceu afegint aquest HTML.
on és la llanterna d’aquest telèfon
<h1 class="loading-indicator">Loading...</h1>
A continuació, seleccioneu l'element de càrrega.
const loadingIndicator = document.querySelector(".loading-indicator");
Finalment, creeu dues funcions per canviar la visibilitat de l'indicador de càrrega.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
A continuació, afegiu-los a la funció d'obtenció.
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;
}
}
Que dóna:
Bones pràctiques per al desplaçament infinit
Algunes pràctiques recomanades a seguir inclouen:
- No agafeu massa articles alhora. Això pot desbordar el navegador i degradar el rendiment.
- En lloc d'obtenir contingut immediatament després de detectar un esdeveniment de desplaçament, utilitzar una funció de rebot per retardar una mica la recollida. Això pot evitar les peticions excessives de la xarxa .
- No tots els usuaris prefereixen el desplaçament infinit. Oferir una opció a utilitzar un component de paginació si es desitja.
- Si no hi ha més contingut per carregar, informa l'usuari en lloc d'intentar contínuament obtenir més contingut.
Dominar la càrrega de contingut perfecta
El desplaçament infinit permet als usuaris navegar per contingut sense problemes i és fantàstic per a les persones que utilitzen dispositius mòbils. Si utilitzeu els consells i consells importants d'aquest article, podeu afegir aquesta funció als vostres llocs web.
Recordeu pensar com se senten els usuaris quan utilitzen el vostre lloc. Mostra coses com ara signes de progrés i notes d'error per assegurar-te que l'usuari sàpiga què està passant.