Отображение длинного контента - разбиение на страницы, автоподгрузка с бесконечной прокруткой

26.11.18 ИТ / Разное 2518

Часто требуется отобразить на странице длинный контент, сделать это можно разными способами. Таким контентом может быть всё что угодно – обычный текст, изображения, товары и т.д. Самый простой подход - оставить всё как есть, будет показан весь контент. Но это не лучший вариант, так как необходимо более большое время на загрузку сразу всего контента из базы данных и его рендеринг на странице. Из-за этого браузер может даже подвисать на некоторое время. Поэтому необходимо использовать механизм разбиения контента на страницы.

Известно два подхода к показу длинного контента на странице сайта – разбиение на страницы или бесконечная прокрутка. А третий заключается в комбинации этих вариантов, данный подход используется в популярных сервисах, соцсетях и т.д.

Разбиение контента на страницы

Первый способ заключается в разбиении контента на отдельные страницы. У этого подхода есть свои достоинства и недостатки. Среди минусов можно выделить то, что посетителю приходится совершать дополнительные действия на странице. Среди достоинств можно выделить:

• достаточно хорошая конверсия – посетители охотнее взаимодействуют с сайтом;
• ощущение контроля – пользователь легко может найти нужный отрывок текста или элемент, а также быстро сменить страницу;
• несложно запомнить расположение элементов благодаря четкой структуре навигации.

Автоподгрузка с бесконечной прокруткой

Второй способ – бесконечный прокрутка или скроллинг. Больше подходит для крупных элементов, например, изображений. Среди достоинств можно выделить:

• вовлечение посетителя и раскрытие материала;
• нет необходимости делать лишние щелчки мышкой;
• на мобильных устройствах удобнее прокручивать контент.

Но есть и минусы данного похода, которых больше, чем у первого способа:

• более высокие требования к ресурсам устройства, страдает производительность страницы;
• полоса прокрутки может не показывать реальную навигацию;
• сложность поиска элементов;
• отсутствие и сложность прокрутки до нижней части страницы.

Гибридный подход

Третий способ самый правильный – использовать там, где нужно первый подход, в других местах – второй подход, а также их сочетания. Например, долистав до определенной позиции - можно показать навигационную панель со списком страниц.

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