etechblog

Jak implementovat Infinite Scroll ve webové aplikaci

Nekonečné posouvání umožňuje načítání obsahu nepřetržitě, jak se uživatelé pohybují po stránce, na rozdíl od tradiční metody stránkování kliknutím a načtení. Tato funkce může nabídnout plynulejší zážitek, zejména na mobilních zařízeních.

Zjistěte, jak nastavit nekonečné posouvání pomocí prostého HTML, CSS a JavaScriptu.

Nastavení frontendu

Chcete-li zobrazit svůj obsah, začněte se základní strukturou HTML. Zde je příklad:

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

Tato stránka obsahuje řadu zástupných obrázků a odkazuje na dva zdroje: soubor CSS a soubor JavaScript.

Styl CSS pro rolovatelný obsah

Chcete-li zobrazit zástupné obrázky v mřížce, přidejte do souboru style.css následující CSS:

 * {
  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 tuto chvíli by vaše stránka měla vypadat takto:

  Jak získat přístup k webu Microsoft Teams SharePoint pro tým

Implementace jádra s JS

Upravit skript script.js. Chcete-li implementovat nekonečné posouvání, musíte zjistit, kdy se uživatel posunul poblíž spodní části kontejneru obsahu nebo stránky.

 "use strict";

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

Potom vytvořte funkci pro načtení dalších zástupných dat.

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

Pro tento projekt můžete použít API od fakestoreapi.

Chcete-li potvrdit, že se vaše data načítají při posouvání, podívejte se na konzolu:

Všimnete si, že vaše data se při posouvání načítají několikrát, což může být faktor, který snižuje výkon zařízení. Chcete-li tomu zabránit, vytvořte počáteční stav načítání dat:

 let isFetching = false; 

Poté upravte funkci načítání tak, aby načítala data pouze po dokončení předchozího načítání.

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

Zobrazení nového obsahu

Chcete-li zobrazit nový obsah, když uživatel posouvá stránku dolů, vytvořte funkci, která obrázky připojí k nadřazenému kontejneru.

  6 věcí, které můžete dělat s tlumočníkem kódů ChatGPT

Nejprve vyberte nadřazený prvek:

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

Poté vytvořte funkci pro připojení obsahu.

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

Nakonec upravte svou funkci načtení a předejte načtená data funkci append.

 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 váš nekonečný svitek nyní funguje.

Chcete-li zlepšit uživatelský komfort, můžete při načítání nového obsahu zobrazit indikátor načítání. Začněte přidáním tohoto HTML.

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

Poté vyberte nakládací prvek.

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

Nakonec vytvořte dvě funkce pro přepínání viditelnosti indikátoru zatížení.

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

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

Poté je přidejte do funkce načítání.

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

Což dává:

  Jak přepnout z Bash na Fish Shell v Linuxu

Mezi doporučené postupy patří:

  • Nevytahujte příliš mnoho položek současně. To může zahltit prohlížeč a snížit výkon.
  • Namísto načítání obsahu ihned po zjištění události posouvání použijte funkci debounce k mírnému zpoždění načítání. To může zabránit nadměrným síťovým požadavkům.
  • Ne všichni uživatelé preferují nekonečné posouvání. V případě potřeby nabídněte možnost použít komponentu stránkování.
  • Pokud již není možné načíst žádný další obsah, informujte uživatele, místo aby se neustále pokoušeli načíst další obsah.

Zvládnutí bezproblémového načítání obsahu

Nekonečné posouvání umožňuje uživatelům plynule procházet obsah a je skvělé pro uživatele mobilních zařízení. Pokud využijete tipy a důležité rady z tohoto článku, můžete tuto funkci přidat na své weby.

Nezapomeňte myslet na to, jak se uživatelé cítí, když používají váš web. Zobrazujte věci jako znaky průběhu a chybové poznámky, abyste se ujistili, že uživatel ví, co se děje.

x