Бесконечный скроллинг: эффективное решение или причуда? Недостаток #1: Работоспособность страницы и ресурсы устройства. Где использовать бесконечную прокрутку
a! Разбивка контента на страницы с номерами является классической схемой пагинации, интуитивно понятной и привычной для пользователей. Однако, в последнее время все больше сайтов начинают «применять на практике» такой вид навигации по страницам как, Infinite Scroll
(бесконечная прокрутка). Исключением не стали даже такие гиганты как Google, Facebook и ВКонтакте. Естественно у данного вида пагинации есть свои плюсы и минусы, но это уже другой разговор. В этом уроке мы рассмотрим, как можно реализовать подобную навигацию.
Да все очень просто, если пользователь уже прокрутил определенное количество записей и находится в нижней части страницы, то с небольшой задержкой подгружаются еще сообщения. Для этого с помощью $.post
формируем POST запрос к странице загрузки данных из БД (.php
файл), HTML структура записей формируется этом же файле. После чего, структурирование HTML разметкой данные возвращаются в скрипт и размещаются на странице.
Процесс определения положения пользователя на странице:
1 | // Если прокрутка включена
// Проверяем пользователя, находится ли он в нижней части страницы
// Идет процесс
// Запустить функцию для выборки данных с установленной задержкой
GetData() ; } , $settings.delay ) ; }
|
Вы наверняка заметили использование переменных, так сказать параметры плагина, о них немного позже. Функция AJAX запроса к PHP файлу getData() , выглядит следующим образом:
1 | // Функция AJAX запроса
// Формируется POST запрос к ajax.php
Action :
"scrollpagination"
,
} , function (data) ) .html ($initmessage) ; // Если возвращенные данные пусты то сообщаем об этом
// Добавление полученных данных в DIV content
// Процесс завершен
} ) ; |
PHP сценарий запроса к БД и формирования структуры выходных сообщений может выглядеть любым приемлемым для Вас образом. Все что Вам нужно сделать, это взять некоторую информацию из базы данных MySQL на ваш выбор. Далее приведен очень простой ajax.php файл, который берет информацию из базы данных MySQL и отображает содержимое с названием и ссылкой.
1 |
 Загрузка...Возможно вам будет интересно:
Последние статьи
|
