WebGuruz

Видимо постраничная загрузка выходит из моды и все хотят загрузку по мере прокрутки страницы. Ну что ж, приступим =)

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

Читать похожие статьи:

• Все php функции в javascript (0)