Этот простой урок на первый взгляд не несет практической ценности. Однако он покажет технологию, которую уже используют некоторые западные сайты (например Live Image Search). И, возможно, эта технология будет все больше и больше распространятся. Суть ее в том, что Вам не нужно традиционно листать страницы сайта, чтобы посмотреть следующую, а нужно просто промотать страницу вниз, и новое содержание подгрузится автоматически.
Шаг 1.
Подключим фреймворк jQuery и плагин endless-scroll к нашему документу, прописав следующий код между тегами <head>:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.endless-scroll-1.3.js.txt"></script>
Шаг 2.
Далее пропишем следующий скрипт:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(document).endlessScroll({
fireOnce: false,
fireDelay: false,
insertAfter: "ul li:last",
callback: function(p){
$("ul li:last").after("<li>Added text " + p + "</li>");
}
});
});
</script>
Шаг 3.
В тело документа вставим список такой длины, чтобы вызвать полосу прокрутки в браузере. В нашем случае этот список состоит из 50 элементов.
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
Здесь Вам нужно вставить
недостающие элементы списка.
<li>Text 48</li>
<li>Text 49</li>
<li>Text 50</li>
</ul>
Готово! Теперь при перемотке страницы вниз автоматически подгружается новые элементы списка.