Opi äärettömän vierityksen periaatteista ja käytännöistä.

Ääretön vieritys sallii sisällön latautuvan jatkuvasti, kun käyttäjät siirtyvät alaspäin sivulla, toisin kuin perinteisessä sivutusmenetelmässä. Tämä ominaisuus voi tarjota sujuvamman käyttökokemuksen erityisesti mobiililaitteissa.

Tutustu loputtoman vierityksen määrittämiseen pelkällä HTML: llä, CSS: llä ja JavaScriptillä.

Käyttöliittymän määrittäminen

Aloita HTML-perusrakenteella näyttääksesi sisältösi. Tässä on esimerkki:

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" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>





instagram viewer

<scriptsrc="script.js">script>
body>
html>

Tämä sivu sisältää sarjan paikkamerkkikuvia ja viittaa kahteen resurssiin: CSS-tiedostoon ja JavaScript-tiedostoon.

CSS-tyyli vieritettävälle sisällölle

Jos haluat näyttää paikkamerkkikuvat ruudukossa, lisää seuraava CSS omaan tyyli.css tiedosto:

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

Tällä hetkellä sivusi pitäisi näyttää tältä:

Ydintoteutus JS: llä

Muokata script.js. Jotta voit ottaa käyttöön äärettömän vierityksen, sinun on havaittava, milloin käyttäjä on vierittänyt sisältösäiliön tai sivun alareunassa.

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

Luo sitten funktio, joka hakee lisää paikkamerkkitietoja.

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

Tässä projektissa voit käyttää API: ta alkaen fakestoreapi.

Tarkista konsoli varmistaaksesi, että tietojasi noudetaan vierittämällä:

Huomaat, että tietojasi haetaan useita kertoja vierityksen aikana, mikä voi heikentää laitteen suorituskykyä. Estä tämä luomalla tietojen alkuperäinen hakutila:

let isFetching = false;

Muokkaa sitten hakutoimintoa niin, että tiedot noudetaan vasta edellisen haun jälkeen.

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

Uuden sisällön näyttäminen

Jos haluat näyttää uutta sisältöä, kun käyttäjä vierittää sivua alaspäin, luo toiminto, joka liittää kuvat ylätason säilöön.

Valitse ensin pääelementti:

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

Luo sitten funktio sisällön lisäämiseksi.

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

Muokkaa lopuksi hakutoimintoa ja välitä haetut tiedot liitefunktioon.

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

Ja sen myötä loputon rullasi toimii nyt.

Parantaaksesi käyttökokemusta voit näyttää latausilmaisimen, kun haet uutta sisältöä. Aloita lisäämällä tämä HTML-koodi.

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

Valitse sitten latauselementti.

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

Luo lopuksi kaksi toimintoa latausilmaisimen näkyvyyden muuttamiseksi.

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

Lisää ne sitten hakutoimintoon.

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

Joka antaa:

Joitakin parhaita käytäntöjä on noudatettava:

  • Älä hae liian montaa tuotetta samanaikaisesti. Tämä voi kuormittaa selaimen ja heikentää suorituskykyä.
  • Sen sijaan, että noutaisit sisältöä välittömästi vieritystapahtuman havaitsemisen jälkeen, käytä debounce-toimintoa viivästyttääksesi noutoa hieman. Tämä voi estää liialliset verkkopyynnöt.
  • Kaikki käyttäjät eivät pidä äärettömästä vierityksestä. Tarjoa vaihtoehto käytä sivutuskomponenttia haluttaessa.
  • Jos ladattavaa sisältöä ei enää ole, ilmoita siitä käyttäjälle sen sijaan, että yrität jatkuvasti hakea lisää sisältöä.

Hallitsee saumattoman sisällön lataamisen

Äärettömän vierityksen avulla käyttäjät voivat selata sisältöä sujuvasti, ja se sopii erinomaisesti mobiililaitteita käyttäville ihmisille. Jos käytät tämän artikkelin vinkkejä ja tärkeitä neuvoja, voit lisätä tämän ominaisuuden verkkosivustoihisi.

Muista miettiä, miltä käyttäjistä tuntuu, kun he käyttävät sivustoasi. Näytä asioita, kuten edistymismerkkejä ja virheilmoituksia varmistaaksesi, että käyttäjä tietää, mitä tapahtuu.