Home-theater-designers
Бесконечная прокрутка позволяет контенту загружаться непрерывно по мере того, как пользователи перемещаются вниз по странице, в отличие от традиционного метода разбивки по страницам с загрузкой по клику. Эта функция может обеспечить более плавную работу, особенно на мобильных устройствах.
МУО Видео дня ПРОКРУТИТЕ, ЧТОБЫ ПРОДОЛЖИТЬ С СОДЕРЖАНИЕМ
Узнайте, как настроить бесконечную прокрутку с помощью простого HTML, CSS и JavaScript.
Настройка внешнего интерфейса
Начните с базовой структуры HTML для отображения вашего контента. Вот пример:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="script.js"></script>
</body>
</html>
Эта страница содержит серию изображений-заполнителей и ссылается на два ресурса: файл CSS и файл JavaScript.
CSS-стиль для прокручиваемого контента
Чтобы отобразить изображения-заполнители в сетке, добавьте следующий CSS в свой стиль.css файл:
хром: // флаги / # включить-ntp-удаленные-предложения
* {
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%);
}
На данный момент ваша страница должна выглядеть так:
Основная реализация с помощью 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();
}
});
Затем создайте функцию для получения дополнительных данных-заполнителей.
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");
}
}
Для этого проекта вы можете использовать API от поддельныймагазинапи .
Чтобы убедиться, что ваши данные извлекаются при прокрутке, взгляните на консоль:
Вы заметите, что ваши данные извлекаются несколько раз при прокрутке, что может быть фактором, снижающим производительность устройства. Чтобы предотвратить это, создайте начальное состояние выборки данных:
let isFetching = false;
Затем измените функцию выборки, чтобы она извлекала данные только после завершения предыдущей выборки.
async function fetchMoreContent() {
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) {
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; // Reset the flag to false
}
}
Отображение нового контента
Чтобы отображать новый контент, когда пользователь прокручивает страницу вниз, создайте функцию, которая добавляет изображения в родительский контейнер.
Сначала выберите родительский элемент:
const productsList = document.querySelector(".products__list");
Затем создайте функцию для добавления контента.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}
Наконец, измените функцию выборки и передайте полученные данные в функцию добавления.
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;
}
}
И теперь ваша бесконечная прокрутка работает.
Улучшения бесконечной прокрутки
Чтобы улучшить взаимодействие с пользователем, вы можете отображать индикатор загрузки при загрузке нового контента. Начните с добавления этого HTML.
<h1 class="loading-indicator">Loading...</h1>
Затем выберите элемент загрузки.
const loadingIndicator = document.querySelector(".loading-indicator");
Наконец, создайте две функции для переключения видимости индикатора загрузки.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Затем добавьте их в функцию выборки.
async function fetchMoreContent() {
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) {
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(); // Hide loader
isFetching = false;
}
}
Который дает:
Хорошие практики для бесконечной прокрутки
Вот некоторые рекомендации, которым следует следовать:
- Не извлекайте слишком много элементов одновременно. Это может привести к перегрузке браузера и снижению производительности.
- Вместо того, чтобы получать контент сразу после обнаружения события прокрутки, используйте функцию устранения дребезга чтобы немного задержать выборку. Это может предотвратить чрезмерные сетевые запросы .
- Не все пользователи предпочитают бесконечную прокрутку. Предложите вариант, использовать компонент нумерации страниц при желании.
- Если контента для загрузки больше нет, сообщите об этом пользователю, вместо того чтобы постоянно пытаться получить больше контента.
Освоение плавной загрузки контента
Бесконечная прокрутка позволяет пользователям плавно просматривать контент и отлично подходит для людей, использующих мобильные устройства. Если вы воспользуетесь советами и важными советами из этой статьи, вы сможете добавить эту функцию на свои сайты.
как векторизовать логотип в иллюстраторе
Не забывайте думать о том, что чувствуют пользователи, когда используют ваш сайт. Покажите такие вещи, как знаки прогресса и заметки об ошибках, чтобы пользователь знал, что происходит.