AJAX подгрузка контента при прокрутке

В этом материале мы рассмотрим тему ajax подгрузка данных при прокрутке страницы. Используя данное решение, можно избавиться от необходимости загружать из базы данных сразу весь контент, что значительно увеличит скорость загрузки всей страницы и уменьшит нагрузку на сервер баз данных. Конечно, как альтернативу этому, можно разбить контент на страницы и реализовать постраничную навигацию, но при этом каждый раз придется перезагружать страницу полностью, вместе со всеми js файлами и файлами стилей. Более того, пользователям придется выполнять больше действий, что хоть и немного, но все же снижает уровень юзабилити. И так, преступим непосредственно к реализации. Рассмотрим ее пошагово.

HTML страница должна содержать два блока:

1. блок со статической шириной и высотой, а так же со свойством overflow:auto для прокрутки контента;
2. внутри первого блока – блок-контейнер, с шириной, не превышающей родительский блок и с высотой, которая зависит от содержимого.

Внутрь второго блока и будет совершаться загрузка с сервера. Форма отображения зависит от ваших нужд и потребностей и никак не влияет на работу скрипта представленного в данном уроке.

Работа скрипта проходит поэтапно: обработка события scroll проверка достижения конца прокрутки; отправка ajax запроса к серверу; добавление полученных данных к странице.

Следующий JavaScript код иллюстрирует первые два этапа.

//запуск функции при прокрутке

$(".text").on("scroll", scrolling);

function scrolling(){
//считывание текущей высоты контейнера
var currentHeight = $(this).children(".wrapper").height();
//проверка достежения конца прокрутки
if($(this).scrollTop() >= (currentHeight - $(this).height()-100)){
/*отключение вызова функции прокрутки
во избежание неоднократного вызова функции */
$(this).unbind("scroll");
//функция реализующая следующие два этапа
loader();}}

Два финальных этапа представлены в следующем фрагменте кода:

//количество подгружаемых записей из бд
var count = 20;
//начиная с
var begin = 0;

function loader(){         
// «теневой» запрос к серверу
$.ajax({

type:"POST",

url:"./get.php",

data:{
//передаем параметры
count: count,
begin: begin*count
},
success:onAjaxSuccess
});
 
function onAjaxSuccess(data){
//добавляем полученные данные
//в конец контейнера
$(".wrapper").append(data);
//возвращение вызова функции при прокрутке
$(".text").on("scroll", scrolling);
}
//увеличение тоски отсчета записей
begin++;
}

Весь контент из базы данных должен разбиваться на блоки с равным количеством записей. В этом нам поможет SQL оператор LIMIT, который предоставляет возможность получить конкретное количество записей, начиная с конкретной позиции. В PHP скрипте остается лишь выполнить запрос к базе данных и вывести результат. PHP скрипт представлен ниже.

// указываем параметры для подключения к MySQL
$host='localhost'; // имя хоста
$database='lazyloader'; // имя базы данных
$user='root'; // имя пользователя
$pass=''; // пароль пользователя

// подключаемся к MySQL
$db = mysql_connect($host, $user, $pass) 
or die("Не могу соединиться с MySQL!");
mysql_select_db($database) 
or die("Не могу подключиться к базе данных!");

//получение количества и позиции
$begin = ($_POST["begin"])?$_POST["begin"]:0;
$count = ($_POST["count"])?$_POST["count"]:12;

//формирование запроса к бд
$query = "SELECT * FROM geobaza_objects WHERE type='country' LIMIT ".$begin.",".$count."";
//выполнение запроса и получение результата
$result = mysql_query($query);

//формирование вывода данных полученных из базы
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "Английское название: ".$row["name_en"]."";
echo "Русское название: ".$row["name_ru"]."";
}

Для примера была использована база городов и стран находящаяся в свободном доступе  (geobaza.ru). Вы же конечно можете использовать свою базу данных, предварительно изменив запрос и формат вывода данных под Ваши потребности. На этом наш урок завершен. Благодарю за внимание!