Пагинация помогает перейти к определённой странице, а кнопка «Показать ещё» продолжает текущий список. Выбор зависит от задачи читателя: вернуться к известному месту, просматривать поток или делиться конкретным результатом. Сделаем маленький локальный пример второго подхода и обозначим его ограничения.
Добавление статей порциями без дублирования
index.html
<!doctype html>
<html lang="ru"><meta charset="utf-8"><title>Загрузка ещё</title>
<h1>Учебный список</h1><ul id="articles"></ul>
<button id="more" type="button">Показать ещё</button><p id="status" aria-live="polite"></p>
<script>
const all = ['Первая статья', 'Вторая статья', 'Третья статья', 'Четвёртая статья', 'Пятая статья'];
const step = 2;
let shown = 0;
const list = document.querySelector('#articles');
const button = document.querySelector('#more');
function showMore() {
const next = Math.min(shown + step, all.length);
for (const title of all.slice(shown, next)) {
const li = document.createElement('li'); li.textContent = title; list.append(li);
}
shown = next;
button.disabled = shown === all.length;
document.querySelector('#status').textContent = `Показано ${shown} из ${all.length}`;
}
button.addEventListener('click', showMore);
showMore();
</script></html>При открытии видны две статьи. Затем добавляются ещё две и последняя. slice получает ещё не показанный диапазон, поэтому строки не дублируются. Math.min ограничивает конец массива. После полного вывода кнопка становится недоступной, но остаётся на месте: читатель получает явный итоговый счётчик.
| Что сравнить | На что смотреть | Что сделать |
|---|---|---|
| Нумерация страниц | Нужно указать конкретный участок | Нужны стабильные адреса и понятный возврат |
| Показать ещё | Удобно продолжать чтение на месте | Нужно сохранить позицию и сообщить результат |
| Бесконечная прокрутка | Поток загружается автоматически | Сложнее доступ к нижним разделам и контроль загрузки |
| Весь список | Данных мало | Дополнительная навигация может быть лишней |
Не прячьте отсутствие сети за тем же счётчиком
Здесь все данные уже в памяти, запросов нет. При серверной версии нужны loading, error, empty и защита от повторного запроса. Нельзя увеличивать shown до подтверждения результата: при ошибке интерфейс будет утверждать, что загрузил больше, чем существует в DOM. Отдельно определите, как изменяющийся каталог влияет на границы страниц.
- Нажать до конца и проверить пять уникальных строк.
- Проверить неполную последнюю порцию.
- Проверить массив с одним элементом.
- Продумать возврат назад перед подключением реального сервера.
Для индексируемого каталога вопрос адресов и доступности содержимого нужно решать на уровне сайта, а не обещать поисковую видимость одной кнопкой. Этот пример показывает механику интерфейса и не является полной SEO-архитектурой списка. Сохранение состояния в URL или истории — отдельное расширение с собственными проверками.
Вопросы и ответы
Почему не скрыть кнопку в конце?
Можно выбрать другой вариант. Здесь недоступная кнопка и счётчик сохраняют понятный итог без неожиданного исчезновения текущего элемента.
Нужно ли переносить фокус к новым строкам?
Не автоматически. Обычное добавление и уведомление о количестве часто позволяют сохранить контроль у пользователя.
Работает ли пример с серверной пагинацией?
Нет, он использует локальный массив. Контракт сервера и ошибки нужно добавить отдельно.
Какой вариант всегда лучше?
Универсального ответа нет. Проверяйте сценарий возвращения, объём данных и управление с клавиатуры.
