Az Infinite Scroll megvalósítása webalkalmazásban

A végtelen görgetés lehetővé teszi a tartalom folyamatos betöltését, miközben a felhasználók lefelé haladnak az oldalon, ellentétben a hagyományos oldalszámozás kattintással betölthető módszerével. Ez a funkció simább élményt kínál, különösen mobileszközökön.

Fedezze fel, hogyan állíthat be végtelen görgetést egyszerű HTML, CSS és JavaScript használatával.

A frontend beállítása

Kezdje egy alapvető HTML-struktúrával a tartalom megjelenítéséhez. Íme egy példa:

 <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/style.css" />
</head>
<body>
    <h1>Infinite Scroll Page</h1>

    <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>
</body>
</html>

Ez az oldal helyőrző képeket tartalmaz, és két forrásra hivatkozik: egy CSS-fájlra és egy JavaScript-fájlra.

CSS-stílus görgethető tartalomhoz

A helyőrző képek rácsban való megjelenítéséhez adja hozzá a következő CSS-t a style.css fájlhoz:

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

Jelenleg az oldaladnak így kell kinéznie:

  Tedd újjá Macedet a hatékony optimalizálás segítségével – CleanMyMac

Alapvető megvalósítás JS-vel

Szerkessze a script.js fájlt. A végtelen görgetés megvalósításához észlelnie kell, ha a felhasználó görgetett a tartalomtároló vagy az oldal aljához.

 "use strict";

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

Ezután hozzon létre egy függvényt további helyőrző adatok lekéréséhez.

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

Ehhez a projekthez az API-t használhatja fakestoreapi.

Ha meg szeretné győződni arról, hogy a rendszer lekéri-e az adatokat görgetéskor, vessen egy pillantást a konzolra:

Észre fogja venni, hogy a rendszer görgetés közben többször is lekéri az adatokat, ami ronthatja az eszköz teljesítményét. Ennek elkerülése érdekében hozzon létre egy kezdeti adatlekérési állapotot:

 let isFetching = false; 

Ezután módosítsa a lekérési funkciót úgy, hogy csak az előző lekérés befejezése után kérje le az adatokat.

 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();
  } catch (error) {
    console.error("There was a problem fetching new content:", error);
  } finally {
    console.log("Fetch function fired");
    isFetching = false;
  }
}

Az új tartalom megjelenítése

Ha új tartalmat szeretne megjeleníteni, amikor a felhasználó lefelé görget az oldalon, hozzon létre egy függvényt, amely hozzáfűzi a képeket a szülőtárolóhoz.

  A Quassel Core beállítása az Ubuntu szerveren

Először válassza ki a szülő elemet:

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

Ezután hozzon létre egy függvényt a tartalom hozzáfűzéséhez.

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

Végül módosítsa a lekérési függvényt, és adja át a lekért adatokat az append függvénynek.

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

És ezzel a végtelen tekercsed most működik.

A felhasználói élmény javítása érdekében megjeleníthet egy betöltésjelzőt az új tartalom lekérésekor. Kezdje a HTML hozzáadásával.

 <h1 class="loading-indicator">Loading...</h1> 

Ezután válassza ki a betöltő elemet.

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

Végül hozzon létre két funkciót a betöltésjelző láthatóságának váltásához.

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

function hideLoadingIndicator() {
  loadingIndicator.style.display = "none";
  console.log("Finished loading.");
}

Ezután adja hozzá őket a lekérési függvényhez.

 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("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();
    isFetching = false;
 }
}

Ami ad:

  Dekódolt CPU-k: Az Intel mikroarchitektúra-neveinek megértése

Néhány követendő bevált gyakorlat a következők:

  • Ne hozzon le túl sok elemet egyszerre. Ez túlterhelheti a böngészőt és ronthatja a teljesítményt.
  • Ahelyett, hogy egy görgetési esemény észlelése után azonnal lekérné a tartalmat, használjon debounce funkciót a lekérés kismértékű késleltetésére. Ez megakadályozhatja a túlzott hálózati kéréseket.
  • Nem minden felhasználó részesíti előnyben a végtelen görgetést. Ha szükséges, ajánljon fel egy oldalszámozási összetevő használatának lehetőségét.
  • Ha nincs több betöltendő tartalom, értesítse a felhasználót ahelyett, hogy folyamatosan újabb tartalmat próbálna lekérni.

A zökkenőmentes tartalombetöltés elsajátítása

A végtelen görgetés lehetővé teszi a felhasználók számára a tartalom zökkenőmentes böngészését, és ez nagyszerű a mobileszközöket használók számára. Ha használja a cikk tippjeit és fontos tanácsait, hozzáadhatja ezt a funkciót webhelyéhez.

Ne felejtse el gondolni arra, hogy a felhasználók hogyan érzik magukat, amikor használják webhelyét. Mutasson olyan dolgokat, mint az előrehaladás jelei és a hibajegyzetek, hogy megbizonyosodjon arról, hogy a felhasználó tudja, mi történik.