Основная идея заключается в прослушивании событий прокрутки и реализации подкачки на стороне сервера.
Событие scroll наступает всякий раз, когда документ или содержащийся элемент HTML прокручивается. Я буду использовать этот эскиз для справки, помня следующие вещи:
Допустим, высота окна браузера составляет 800 пикселей, а начальная высота содержимого - 2500 пикселей. Пороговое значение для загрузки содержимого AJAX - это когда пользователь прокручивает до нижних 100 пикселей нашего содержимого (после первых 2400 пикселей).
Нам нужно будет отслеживать следующие 2 элемента:
- Предметы / Страницы загружены до сих пор.
- Как далеко мы от основания
страница.
Ссылки на код в MooTools, но концепция та же. Преобразование его в jQuery является тривиальной задачей, если вы понимаете это.
var maxPage = 1;
var threshold = 100;
Нам нужно знать, когда страница прокручивается, поэтому добавьте обработчик для событий прокрутки . Найдите расстояние прокрутки до нижней части страницы. Если он меньше установленного порогового значения (100 пикселей), то запускается AJAX-запрос, загружающий следующую страницу. Когда ответ приходит (если он успешен), добавьте его на страницу и увеличьте номер maxPage.
Еще одна вещь, о которой следует помнить, - запускать AJAX-запрос, только если контент еще не загружается. Имейте флаг, который указывает, ожидает ли запрос страницы все еще.
var isLoading = false;
window.addEvent('scroll', function() {
// the height of the entire content (including overflow)
var contentHeight = window.getScrollSize().y;
// current scroll is height of content that's above the viewport plus
// height of the viewport.
var contentScrolled = window.getScroll().y + window.getSize().y;
var distanceToBottom = contentHeight - contentScrolled;
var closeToBottomOfPage = distanceToBottom < threshold;
var shouldLoadMoreContent = !isLoading && closeToBottomOfPage;
if(shouldLoadMoreContent) {
// create an ajax request
var request = new Request({
url: 'http://www.example.com/more',
onSuccess: function(responseText) {
$('page').append(responseText);
maxPage++;
},
onRequest: function() {
isLoading = true;
},
onComplete: function() {
isLoading = false;
}
});
// fire off ajax request with the page # as a querystring param
request.send({page: maxPage});
}
}