В современной веб-разработке принято отображать большие объемы данных в виде списков. Однако загрузка всех данных одновременно может отрицательно повлиять на производительность. Для решения этой проблемы часто используется функция «Загрузить больше». Эта функция позволяет пользователям постепенно загружать дополнительные данные, улучшая взаимодействие с пользователем и оптимизируя производительность. В этой статье мы рассмотрим несколько методов реализации функции «Загрузить больше» в представлениях списков, а также приведем примеры кода.

1. Загрузка дополнительных данных на стороне клиента:
   Этот метод предполагает получение дополнительных данных с сервера и добавление их к существующему списку с помощью клиентского JavaScript.

let pageNumber = 1;
const itemsPerPage = 10;
const listContainer = document.getElementById('list-container');
function loadMoreItems() {
  fetch(`/api/data?page=${pageNumber}&limit=${itemsPerPage}`)
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = item.name;
        listContainer.appendChild(listItem);
      });
      pageNumber++;
    });
}
document.getElementById('load-more-button').addEventListener('click', loadMoreItems);

1. Загрузка дополнительных данных на стороне сервера.
   При этом подходе сервер обрабатывает разбиение на страницы и возвращает соответствующие данные на основе запрошенного номера страницы.

const express = require('express');
const app = express();
const itemsPerPage = 10;
app.get('/api/data', (req, res) => {
  const { page } = req.query;
  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const data = getDataFromDatabase(start, end); // Replace with your data retrieval logic
  res.json(data);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

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

window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 5) {
    loadMoreItems();
  }
});

1. Кнопка со смещением.
   В этом методе кнопка отображается, и при нажатии она загружает следующий набор данных со смещением.

let offset = 0;
function loadMoreItems() {
  fetch(`/api/data?offset=${offset}&limit=${itemsPerPage}`)
    .then(response => response.json())
    .then(data => {
      // Append data to the list
      offset += itemsPerPage;
    });
}
document.getElementById('load-more-button').addEventListener('click', loadMoreItems);

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