Показать Меню
falbar Подгрузка контента при скроллинге

Делаем подгрузку контента при прокрутке страницы

Подгрузка контента при скроллинге

В настоящее время на многих сайтах можно увидеть динамически подгружаемый контент при прокрутке страницы. Этот эффект стал одной из хороших альтернатив обычной постраничной навигации. Хотя и у него есть свои недостатки, но удобство этого способа их компенсирует. Из этой статьи Вы узнаете, как реализовать такой функционал у себя в проекте используя jQuery плагин jScroll.

Подключаем jQuery библиотеку и скрипт:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.jscroll.min.js" type="text/javascript"></script>

Теперь нам необходимо добавить HTML разметку:

<div id="content">
	<div class="next">
		<a href="путь_до_обработчика">next</a>
	</div>
</div>

И наконец, применяем плагин к блоку с индикатором content:

$("#content").jscroll();

У jScroll есть свои настройки:

  • debug – включает возможность отслеживать работу скрипта через консоль, принимает значения true или false (по умолчанию false);
  • autoTrigger – отвечает за автоподгрузку контента, принимает значения true или false. По умолчанию установлено true, но если указать false автоподгрузка будет отключена, а вместо неё появится кнопка;
  • autoTriggerUntil – указывает сколько раз подгружать контент автоматически (по умолчанию false);
  • loadingHtml – в этом параметре мы можем поместить HTML код, который будет в место "Loading..." (по умолчанию "Loading...");
  • padding – отступ до подгружаемого контента. Данный параметр работает, когда в значение autoTrigger установлено true (по умолчанию 0);
  • nextSelector – указывается селектор поиска пути обработчика (по умолчанию "a:last");
  • contentSelector - указывается селектор для загрузки части контента (по умолчанию "");
  • callback – функция вызывается в конце каждой загрузки данных. Внутрь её передаётся jQuery объект HTML элемента, в котором находится загруженный контент (по умолчанию false).

Завершая рассматривать подключение плагина и его настройки, важно упомянуть, что передача данных на сервер осуществляется при помощи метода GET.

Пример работы с плагином

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

HTML:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title>jQuery jScroll</title>
	<link href="main.css" type="text/css" rel="stylesheet" />
	<script src="jquery.lib.js" type="text/javascript"></script>
	<script src="jquery.jscroll.min.js" type="text/javascript"></script>
</head> 
</head>
<body>
	<div id="content">
	</div>
</body>
</html>

CSS:

*{
	padding: 0;
	margin: 0;
	font-family: Tahoma;
}
#content{
	font-size: 14px;
	width: 60%;
	margin: 0 auto;
	border: 1px solid #ccc;
	padding: 0 7px;
}
	#content p{
		margin: 10px;
	}
	#content p span:first-child{
		font-size: 20px;
		font-weight: bold;
		padding: 10px;
	}
	.jscroll-loading{
		text-align: center;
		padding: 7px 0;
	}
	.next a{
		padding: 7px 5px;
		color: #000;
		border-radius: 5px;
		display: block;
		border: 1px solid #ccc;
		margin: 0 auto 8px;
		text-decoration: none;
		width: 30px;
	}
	.next a:hover{
		border: 1px solid #54A7EB;
		color: #54A7EB; 
	}

jQuery код:

$(function(){

	var content = $("#content"),
		loading = "<img src='loading.gif' alt='Loading' />";

	// Подгрузка первых записей
	$.ajax({
		url: "jscroll.php",
		dataType: "json",
		type: "GET",
		data: {type: "start"},
		success: function(data){

			if(data){

				content.append(data);
				content.find(".jscroll-loading:first").slideUp(700, function(){

					$(this).remove();
				});

				// Вызываем плагин
				$("#content").jscroll({
					autoTriggerUntil: 2,
					loadingHtml: loading
				});
			};
		},
		beforeSend: function(){

			content.append("<div class='jscroll-loading'>" + loading + "</div>");
		}
	});
});
  1. Помещаем весь скрипт в jQuery обёртку;
  2. Определяем две переменных: впервой будет находиться результат выборки, во второй HTML код loading;
  3. После загрузки страницы обращаемся к файлу jscroll.php с параметром type равным start и добавляем на страницу loading;
  4. Если пришёл ответ, то добавляем его на страницу и удаляем loading;
  5. Вызываем плагин.

Переходим к серверу, тут у нас будет чуть больше кода. Я не стал выносить функции в отдельный файл, чтобы всё было максимально компактно.

Вверху файла описываем настройки сервера: start_count_posts (изначальное число подгружаемых записей), loading_count_posts (число записей подгружаемых при прокрутке), path (путь до обработчика) и text (записи у нас будут отличаться только своими номерами, так как это пример).

$start_count_posts   = 7;
$loading_count_posts = 10;
$path = "jscroll.php";

$text = "Равным образом ... прогрессивного развития.";

Далее мы добавим вспомогательные функции: is_ajax(), is_get() и template_post().

function is_ajax(){

	if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) &&
	   !empty($_SERVER["HTTP_X_REQUESTED_WITH"]) &&
	   strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) == "xmlhttprequest"){

		return true;
	}

	return false;
}

function is_get(){

	if($_SERVER["REQUEST_METHOD"] == "GET"){

		return true;
	}

	return false;
}

function template_post($num, $text){

	if($num && $text){

		$html .= "

			<p>
				<span>".$num."</span>
				<span>
					".$text."
				</span>
			</p>
		";

		return $html;
	}

	return false;
}

Теперь нам остаётся написать обработчик запросов, который будет анализировать пришедшие данные на сервер и возвращать результат его работы.

// Обработка запросов
if(is_get() && is_ajax()){

	// Подгрузка первых записей
	if(isset($_GET["type"]) && $_GET["type"] === "start"){
		sleep(1);

		for($i = 0; $i <= $start_count_posts; $i++){ 

			$posts .= template_post($i, $text);
		}

		$posts .= "

			<div class='next'>
				<a href='".$path."?count=".$loading_count_posts."'>next</a>
			</div>
		";

		echo(json_encode($posts));
	}

	// Подгрузка записей
	if(isset($_GET["count"])){

		$count = (int) $_GET["count"];

		if ($count == 50){
			
			exit;
		}

		sleep(1);

		for($i = $count + 1; $i <= $count + $loading_count_posts; $i++){

			$posts .= template_post($i, $text);
		}

		$count += $loading_count_posts;

		$posts .= "

			<div class='next'>
				<a href='".$path."?count=".$count."'>next</a>
			</div>
		";

		echo($posts);
	}
}

exit;

Обработка данных начинается с проверки способа, которым отправляются они на сервер. Если всё удачно, то заходим внутрь и обрабатываем пришедшие данные, иначе вызываем функцию exit. Так как в данном примере мы выводим одну и ту же запись, я умышленно поставил задержки в каждом из случаев по одной секунде. Далее формируем HTML код для ответа и отправляем обратно к пользователю.

Вот и всё, теперь Вы сможете легко добавить к себе на сайт jScroll плагин для подгрузки контента.

Спасибо за внимание.

Подписаться на обновления

Artemy
Artemy 29 марта 2015 в 20:46
Спасибо за подробный пример, мне как раз было нужно добавить ленту на сайт и этот плагин меня выручил.
Ответить
Gennady Shabalovsky
Gennady Shabalovsky 10 августа 2016 в 10:21
Я обычный "читатель" таких лент и попал сюда когда искал как с этим бороться. У меня 8 гига памяти и я не всегда могу дойти до конца такой странички. Особенно если это с гифками, видео или coub-ми.
Ответить
Антон Кулешов
Антон Кулешов > Gennady Shabalovsky 14 августа 2016 в 15:22
С этим бороться нет смысла. Будет лента на сайте или нет решает только владелец сайта.
Ответить