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

16 ноября 2014 Антон Кулешов 18622 3

В настоящее время на многих сайтах можно увидеть динамически подгружаемый контент при прокрутке страницы. Этот эффект стал одной из хороших альтернатив обычной постраничной навигации. Хотя и у него есть свои недостатки, но удобство этого способа их компенсирует. Из этой статьи вы узнаете, как реализовать такой функционал у себя в проекте используя 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
Спасибо за подробный пример, мне как раз было нужно добавить ленту на сайт и этот плагин меня выручил.
Gennady Shabalovsky
Gennady Shabalovsky 10 августа 2016
Я обычный "читатель" таких лент и попал сюда когда искал как с этим бороться. У меня 8 гига памяти и я не всегда могу дойти до конца такой странички. Особенно если это с гифками, видео или coub-ми.
Антон Кулешов
Антон Кулешов 14 августа 2016
С этим бороться нет смысла. Будет лента на сайте или нет решает только владелец сайта.
no_avatar
Читайте далее

Плавное увеличение картинок при наведении курсора

27 ноября 2014 Антон Кулешов

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

Как расшарить 3G модем по сети

23 июля 2014 ti1schweiger

Широкополосный интернет давно не редкость, но до сих пор существуют места куда он не добрался, а мобильная связь существует. За последнее время мобильные операторы солидно повысили стабильность и скорость работы 3G интернета, потому данная статья будет посвящена тому, как интернет с «триджика» раздать всем пользователям сети.

Улучшенная подсветка кода от prism

11 февраля 2015 Антон Кулешов

Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.