Насколько я помню, веб-разработчики обратились к старомодной нумерации страниц, когда есть много контента для показа. Не поймите меня неправильно, нумерация страниц по-прежнему является очень эффективным способом отображения контента, но в этом посте мы обсудим альтернативу — бесконечную прокрутку. Этот метод, также известный как ленивая прокрутка или распаковка, загружает новый контент через Ajax, когда пользователь завершил прокрутку существующего контента страницы. Бесконечная прокрутка используется некоторыми крупнейшими именами в Интернете, включая Facebook и Pinterest. В этой статье мы поговорим о создании собственного плагина jQuery для реализации бесконечной прокрутки.
компромиссы
Преимущества очевидны. Чтобы получить больше контента, вам не нужно перенаправлять на новую страницу (которая имеет тенденцию смещать ваш фокус в другую область во время загрузки страницы). Реализуя бесконечную прокрутку, вы в основном управляете фокусом пользователя на странице!
Бесконечная прокрутка не эффективна во всех ситуациях. Например, если пользователь щелкает ссылку и затем использует кнопку «Назад» в браузере, он теряет свою позицию в потоке данных, который был загружен через Ajax. Одной из мер предосторожности при реализации этой функции является загрузка нового содержимого на новой вкладке или в окне.
С этим связан недостаток бесконечной прокрутки — невозможность сохранить позицию в потоке. Предположим, вы хотите поделиться чем-то на бесконечной странице прокрутки с вашим другом по электронной почте. Вы не можете сделать это, потому что URL возвращает вас в исходное положение. Поэтому, прежде чем вы решите продолжить, подумайте о юзабилити вашего сайта.
Кроме того, прежде чем использовать бесконечную прокрутку, помните, что она не очень удобна для поисковых систем. Чтобы избежать проблем с видимостью в поисковых системах, убедитесь, что вы предоставили альтернативу с нумерацией страниц или картой сайта.
Начиная
Мы начнем с выкладывания очень простой страницы. Важные части примера HTML и CSS показаны ниже. Остальные файлы можно увидеть, нажав на демонстрационную ссылку в конце этого урока.
HTML
<div id="data-container"> <div class="data-item"> Hi! I am the first item. </div> <div class="data-item"> Hi! I am the second item. </div> <div class="data-item"> Hi! I am the third item. </div> <div class="data-item"> Ok, this is getting boring. </div> <div class="data-item"> Let's try something new. </div> <div class="data-item"> How about loading some more items through AJAX? </div> <div class="data-item"> Click the button below to load more items. </div> </div> <div id="button-more" onclick="lazyload.load()"> Load more items </div> <div id="loading-div"> loading more items </div> CSS
#data-container { margin: 10px; } #data-container .data-item { background-color: #444444; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; margin: 5px; color: #fff; } #loading-div { display: none; } #button-more{ cursor: pointer; margin: 0 auto; background-color: #aeaeae; color: #fff; width: 200px; height: 50px; line-height: 50px; }
Основной рабочий процесс
Если вы посмотрите на документ, который мы создали, новые сообщения должны быть загружены, когда вы нажмете кнопку «Загрузить еще». Вот несколько моментов для рассмотрения.
- Необходимо сделать запрос к URL, который возвращает новые элементы, которые будут добавлены на вашу страницу.
- Этот процесс должен повториться, если кнопка будет нажата снова, но новые сообщения должны быть возвращены во второй раз.
- Новые сообщения должны предоставляться при каждом последующем запросе, пока не будет больше сообщений для отображения.
- Когда больше не осталось сообщений, вы должны сообщить пользователю, что он достиг конца.
Ajax Pattern
В идеале вы должны объявить переменную для хранения номера страницы, которая, в свою очередь, изменит URL-адрес, на который будет отправлен запрос. В нашей демонстрации у нас есть три таких страницы — 2.html , 3.html и пустой 4.html для демонстрационных целей.
Когда вы нажимаете на кнопку, чтобы загрузить больше сообщений, проходит некоторое время, прежде чем запрос будет успешно выполнен и новые элементы загружены. В этом случае мы скрываем кнопку загрузки и показываем некоторый текст о том, что загружаются новые элементы:
$(buttonId).hide(); $(loadingId).show();
Добавление данных на страницу
Во-первых, нам нужно отменить изменения, которые мы выполнили, когда выполнялся запрос, а именно, снова показать кнопку «загрузить больше» и скрыть текст. Во-вторых, нам нужно добавить полученный ответ в список элементов, уже присутствующих на странице. Обратите внимание, что в демоверсии мы получаем HTML-разметку напрямую, чтобы упростить задачу. Вы также можете отправить JSON-ответ, добавив больше переменных, таких как сообщение или статус. Код добавления показан ниже.
$(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1;
Обработка конца данных
Как только вы дойдете до конца своих сообщений, вам нужно показать своему пользователю, что на странице больше нет сообщений для загрузки. Это можно сделать разными способами. Мы можем отправить статус через код или сообщение, встроенное в сам ответ. Однако, поскольку мы используем HTML-разметку непосредственно в этом примере, пустой ответ отмечает конец потока.
$.ajax({ ... success: function(response) { // What to do if the response is empty if (response.trim() == "") { $(buttonId).fadeOut(); $(loadingId).text("No more entries to load!"); return; } // Do something if the response is right. }, ... });
Вывод
Демонстрация, которую мы придумали, очень проста по своей природе, и мы можем добиться гораздо большего, если приложим больше усилий. Во-первых, мы можем полностью удалить кнопку и вызвать функцию, когда пользователь прокручивает страницу до конца. Это исключило бы дополнительный шаг пользователя, нажимающего кнопку, и ускорило бы весь процесс. Во-вторых, мы можем просто отправить необработанные данные через JSON и создать разметку, используя сам jQuery. Например:
$.each(response.items, function(index, value) { $("<div />", { "class" : "data-item", "text" : value }); });
Наконец, ответ JSON может состоять из сообщения, в котором указано, правильно ли прошел запрос, данные и есть ли еще сообщения для загрузки. В этом случае это более эффективный способ отправки ответа.
Для получения дополнительной информации о бесконечной прокрутке, вы можете посетить этот сайт, посвященный причине. Он содержит общую информацию об идее и существующих инструментах, которые вы можете использовать для ее реализации на своем веб-сайте.
Живая демоверсия может быть найдена на страницах GitHub. Код также доступен на GitHub.