Uendelig scrolling: Guide til sømløs innholdslasting med HTML, CSS & JS

by
Tweet
Share
Share
Pin
0 Shares

Uendelig scrolling gir en kontinuerlig strøm av innhold når brukerne navigerer nedover siden, i motsetning til tradisjonell sideinndeling som krever klikk for å laste mer. Dette kan gi en mer flytende brukeropplevelse, spesielt på mobile enheter.

La oss se hvordan du kan implementere uendelig scrolling ved hjelp av standard HTML, CSS og JavaScript.

Konfigurere frontend

Start med en enkel HTML-struktur for å vise innholdet ditt. Her er et eksempel:

<link rel="stylesheet" href="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/style.css" />
<h2>Uendelig Scrolling Side</h2>
<div class="products__list">
  <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"/>
  <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"/>
  <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"/>
  <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"/>
  <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"/>
  <img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"/>
</div>
<script src="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/script.js"></script>

Denne koden inneholder en serie med plassholderbilder og refererer til to filer: en CSS-fil og en JavaScript-fil.

CSS-stiler for scrollbart innhold

For å vise plassholderbildene i et rutenett, legg til følgende CSS-kode i filen style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
  font-family: Cambria, Times, "Times New Roman", serif;
}

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

Siden din vil se omtrent slik ut:

Kjerneimplementering med JS

Rediger script.js. For å implementere uendelig scrolling, må du oppdage når brukeren har rullet seg nær bunnen av innholdsbeholderen eller siden.

"use strict";

window.addEventListener("scroll", () => {
  if (
    window.scrollY + window.innerHeight >=
    document.documentElement.scrollHeight - 100
  ) {
    fetchMoreContent();
  }
});

Deretter lager du en funksjon for å hente flere plassholderdata.

async function fetchMoreContent() {
  try {
    let response = await fetch("https://fakestoreapi.com/products?limit=3");

    if (!response.ok) {
      throw new Error("Nettverksrespons ikke ok");
    }

    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Det oppstod et problem med henting av nytt innhold:", error);
  } finally {
    console.log("Hentefunksjon aktivert");
  }
}

For dette prosjektet kan du bruke API-et fra fakestoreapi.

Ta en titt i konsollen for å bekrefte at dataene dine hentes ved scrolling:

Du vil legge merke til at dataene dine hentes flere ganger når du scroller, noe som kan påvirke ytelsen. For å forhindre dette, lag en variabel for å holde oversikt over om data hentes.

let isFetching = false;

Deretter endrer du hentingsfunksjonen slik at den kun henter data etter at en tidligere henting er fullført.

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("Nettverksresponsen var ikke ok");
    }

    let data = await response.json();
  } catch (error) {
    console.error("Det oppstod et problem med henting av nytt innhold:", error);
  } finally {
    console.log("Hentefunksjonen aktivert");
    isFetching = false;
  }
}

Visning av nytt innhold

For å vise nytt innhold når brukeren scroller nedover siden, lag en funksjon som legger til bildene i den overordnede beholderen.

Velg først det overordnede elementet:

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

Deretter lager du en funksjon for å legge til innhold.

function displayNewContent(data) {
  data.forEach((item) => {
    const imgElement = document.createElement("img");
    imgElement.src = item.image;
    imgElement.alt = item.title;
    productsList.appendChild(imgElement);
  });
}

Til slutt endrer du hentingsfunksjonen din og sender de hentede dataene til tilleggsfunksjonen.

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("Nettverksresponsen var ikke ok");
    }

    let data = await response.json();
    displayNewContent(data);
  } catch (error) {
    console.error("Det oppstod et problem med henting av nytt innhold:", error);
  } finally {
    console.log("Hentefunksjonen aktivert");
    isFetching = false;
  }
}

Og med det fungerer uendelig scrolling nå.

For å forbedre brukeropplevelsen kan du vise en lasteindikator mens du henter nytt innhold. Start med å legge til denne HTML-koden:

<h2 class="loading-indicator">Laster inn...</h2>

Velg deretter lasteelementet.

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

Til slutt, lag to funksjoner for å endre synligheten til lasteindikatoren.

function showLoadingIndicator() {
  loadingIndicator.style.display = "block";
  console.log("Laster inn...");
}

function hideLoadingIndicator() {
  loadingIndicator.style.display = "none";
  console.log("Ferdig med lasting.");
}

Deretter legger du dem til i hentingsfunksjonen.

async function fetchMoreContent() {
  if (isFetching) return;

  isFetching = true;
  showLoadingIndicator();

  try {
    let response = await fetch("https://fakestoreapi.com/products?limit=3");

    if (!response.ok) {
      throw new Error("Nettverksresponsen var ikke ok");
    }

    let data = await response.json();
    displayNewContent(data);
  } catch (error) {
    console.error("Det oppstod et problem med henting av nytt innhold:", error);
  } finally {
    console.log("Hentefunksjonen aktivert");
    hideLoadingIndicator();
    isFetching = false;
  }
}

Som gir:

Noen beste praksiser du bør følge:

  • Ikke hent for mange elementer samtidig. Dette kan overbelaste nettleseren og redusere ytelsen.
  • I stedet for å hente innhold umiddelbart etter at en rullehendelse oppdages, bruk en debounce-funksjon for å forsinke hentingen litt. Dette kan forhindre overdreven antall nettverksforespørsler.
  • Ikke alle brukere foretrekker uendelig scrolling. Tilby et alternativ for å bruke en sideinndelingskomponent hvis ønskelig.
  • Hvis det ikke er mer innhold å laste, informer brukeren i stedet for kontinuerlig å prøve å hente mer innhold.

Mestring av sømløs lasting av innhold

Uendelig scrolling lar brukere bla gjennom innhold jevnt, og det er flott for folk som bruker mobile enheter. Hvis du bruker tipsene og de viktigste rådene fra denne artikkelen, kan du legge til denne funksjonen på nettsidene dine.

Husk å tenke på hvordan brukerne opplever nettsiden din. Vis ting som fremdriftsindikatorer og feilmeldinger for å forsikre deg om at brukeren vet hva som skjer.