Узнайте о принципах и практических возможностях бесконечной прокрутки.

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

Узнайте, как настроить бесконечную прокрутку с помощью простого 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" />


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

Эта страница содержит серию изображений-заполнителей и ссылается на два ресурса: файл CSS и файл JavaScript.

CSS-стиль для прокручиваемого контента

Чтобы отобразить изображения-заполнители в сетке, добавьте следующий CSS в свой стиль.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

Редактировать скрипт.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 от поддельныймагазинапи.

Чтобы убедиться, что ваши данные извлекаются при прокрутке, взгляните на консоль:

Вы заметите, что ваши данные извлекаются несколько раз при прокрутке, что может быть фактором, снижающим производительность устройства. Чтобы предотвратить это, создайте начальное состояние выборки данных:

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

Который дает:

Вот некоторые рекомендации, которым следует следовать:

  • Не извлекайте слишком много элементов одновременно. Это может привести к перегрузке браузера и снижению производительности.
  • Вместо того, чтобы получать контент сразу после обнаружения события прокрутки, используйте функцию устранения дребезга чтобы немного задержать выборку. Это может предотвратить чрезмерные сетевые запросы.
  • Не все пользователи предпочитают бесконечную прокрутку. Предложите вариант, использовать компонент нумерации страниц при желании.
  • Если контента для загрузки больше нет, сообщите об этом пользователю, вместо того чтобы постоянно пытаться получить больше контента.

Освоение плавной загрузки контента

Бесконечная прокрутка позволяет пользователям плавно просматривать контент и отлично подходит для людей, использующих мобильные устройства. Если вы воспользуетесь советами и важными советами из этой статьи, вы сможете добавить эту функцию на свои сайты.

Не забывайте думать о том, что чувствуют пользователи, когда используют ваш сайт. Покажите такие вещи, как знаки прогресса и заметки об ошибках, чтобы пользователь знал, что происходит.