Видимо постраничная загрузка выходит из моды и все хотят загрузку по мере прокрутки страницы. Ну что ж, приступим =)
Допустим уже есть функция 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 номер след. страницы. Но в этом случае, запрос на след. объекты будет отсылаться постоянно когда мы прокрутим страницу, даже если данных уже нет.
Ну вот и все =)
Спасибо за статью.