Видимо постраничная загрузка выходит из моды и все хотят загрузку по мере прокрутки страницы. Ну что ж, приступим =)
Допустим уже есть функция php, которая выдает нам данные постранично.
function get_objects($page=0)
Но одно но, помимо объектов нам нужно возвращать и номер след. страницы.
Поэтому будем возвращать данные в json.
echo json_encode(array("objs"=>тут_все_объекты, "next_page"=>след_страница))
Нужно ее вызывать аяксом. Воспользуемся функцией ajax в jquery.
function ajax_get_objects(page){
//url по котрому доступен get_objects и передаем ему page
var url = "/?get_objects/"+page;
$.ajax({
type: "POST",
url: url,
dataType: "json",
success: function (data){
//тут выводим сами данные как вам нравится. Допустим все данные в элемент c id = "all_page"
$("#all_page").html(data.objs);
slide_func_next_page = data.next_page;
slide_func_last_page = data.page;
}})}
Теперь эту ajax функцию мы и будем вызывать, как прокрутим страницу.
Можно конечно воспользоваться в jquery событием scroll, но она работает во всех браузерах по разному.
Поэтому воспользуемся переписанной функцией, которая отслеживает скролл страницы и создает новые события scrollstop и scrollstart.
Взято тут.
(function(){
var special = jQuery.event.special,
uid1 = 'D' + (+new Date()),
uid2 = 'D' + (+new Date() + 1);
special.scrollstart = {
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if (timer) {
clearTimeout(timer);
} else {
evt.type = 'scrollstart';
jQuery.event.handle.apply(_self, _args);
}
timer = setTimeout( function(){
timer = null;
}, special.scrollstop.latency);
};
jQuery(this).bind('scroll', handler).data(uid1, handler);
},
teardown: function(){
jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
}
};
special.scrollstop = {
latency: 300,
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout( function(){
timer = null;
evt.type = 'scrollstop';
jQuery.event.handle.apply(_self, _args);
}, special.scrollstop.latency);
};
jQuery(this).bind('scroll', handler).data(uid2, handler);
},
teardown: function() {
jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
}
};
})();
Дальше будем использовать новые события scrollstop и scrollstart.
jQuery(window).bind('scrollstop', function(){
var scroll_top = $(document).scrollTop();//высота прокрученной области
var page_height = $(document).height();//высота всей страницы
var wind_height = $(window).height();//высота окна браузера
//если непрокрученной области больше чем высота окна обраузера, то подгружаем след. объекты
if((page_height - scroll_top) < wind_height*2 && slide_func_next_page == 1+slide_func_last_page){
ajax_get_objects(slide_func_next_page);
}
});
Тут дополнительно идет проверка след. страницы, если она больше на 1 предыдущей, то запрашиваем след. объекты. Можно эту проверку и не делать, тогда отпадет надобность отправлять функцией php номер след. страницы. Но в этом случае, запрос на след. объекты будет отсылаться постоянно когда мы прокрутим страницу, даже если данных уже нет.
Ну вот и все =)
Читать похожие статьи:
