Научете за принципите и практическите аспекти на безкрайното превъртане.

Безкрайното превъртане позволява на съдържанието да се зарежда непрекъснато, докато потребителите се движат надолу по страницата, за разлика от метода за зареждане с кликване на традиционното страниране. Тази функция може да предложи по-плавно изживяване, особено на мобилни устройства.

Открийте как да настроите безкрайно превъртане с помощта на обикновен HTML, CSS и JavaScript.

Настройване на интерфейса

Започнете с основна HTML структура, за да покажете вашето съдържание. Ето един пример:

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







instagram viewer



<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>
<scriptsrc="script.js">script>
body>
html>

Тази страница съдържа поредица от запазени изображения и препратки към два ресурса: CSS файл и JavaScript файл.

CSS стил за превъртащо се съдържание

За да покажете изображенията-заместители в мрежа, добавете следния CSS към вашия style.css файл:

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

В момента страницата ви трябва да изглежда така:

Внедряване на ядрото с JS

редактиране script.js. За да приложите безкрайно превъртане, трябва да откриете кога потребителят е превъртял близо до дъното на контейнера със съдържание или страницата.

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

След това създайте функция за извличане на повече данни за контейнери.

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

За този проект можете да използвате API от fakestoreapi.

За да потвърдите, че вашите данни се извличат при превъртане, погледнете конзолата:

Ще забележите, че вашите данни се извличат многократно при превъртане, което може да е фактор, който влошава производителността на устройството. За да предотвратите това, създайте първоначално състояние на извличане на данните:

let isFetching = false;

След това променете функцията си за извличане, за да извличате данни само след като предишното извличане е приключило.

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

Показване на новото съдържание

За да покажете ново съдържание, когато потребителят превърта надолу по страницата, създайте функция, която добавя изображенията към родителския контейнер.

Първо изберете родителския елемент:

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

След това създайте функция за добавяне на съдържание.

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

И накрая, променете функцията си за извличане и предайте извлечените данни на функцията за добавяне.

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

И с това вашето безкрайно превъртане вече работи.

За да подобрите потребителското изживяване, можете да показвате индикатор за зареждане, когато извличате ново съдържание. Започнете с добавяне на този HTML.

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

След това изберете зареждащия елемент.

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

И накрая, създайте две функции за превключване на видимостта на индикатора за зареждане.

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

След това ги добавете към функцията за извличане.

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

Което дава:

Някои най-добри практики, които трябва да следвате, включват:

  • Не вземайте твърде много предмети едновременно. Това може да претовари браузъра и да влоши производителността.
  • Вместо да извлича съдържание веднага след откриване на събитие за превъртане, използвайте функция за отблъскване за малко забавяне на извличането. Това може предотвратяване на прекомерни мрежови заявки.
  • Не всички потребители предпочитат безкрайно превъртане. Предложете опция за използвайте компонент за страниране при желание.
  • Ако няма повече съдържание за зареждане, информирайте потребителя, вместо непрекъснато да се опитвате да изтеглите още съдържание.

Овладяване на безпроблемно зареждане на съдържание

Безкрайното превъртане позволява на потребителите безпроблемно да разглеждат съдържание и е страхотно за хора, използващи мобилни устройства. Ако използвате съветите и важните съвети от тази статия, можете да добавите тази функция към уебсайтовете си.

Не забравяйте да помислите как се чувстват потребителите, когато използват вашия сайт. Показвайте неща като знаци за напредък и бележки за грешка, за да сте сигурни, че потребителят знае какво се случва.