「JavaScript」- 使用 jQuery 实现滚动加载

$(document).ready(function () {
	var nomore_data = false;// 没有数据了
	var is_loading = false;// 正在加载的flag
	var current_page = 1;// 页码

	//页面滚动执行事件
	$(window).scroll(function () {
		var scrollTop = $(document).scrollTop();  //整个页面滚动的高度
		var scrollHeight = $(document).height();  //整个页面的高度
		var windowHeight = $(window).height();    //整个窗口可视化的高度
		if (scrollHeight - 240 <= windowHeight + scrollTop) { // 240为缓冲值,不要非到底才加载. 减少等待.
			load_data();
		}
	});

	// 显示正在加载动画.
	function show_loading_anim(){

		is_loading = true;// 设置正在加载标志

		//TODO:显示动画.

		//由于缓冲值的存在不需要再显示动画.
		return;
	}

	// 移除正在加载动画
	function rm_loading_anim(){

		is_loading = false;// 取消正在加载的flag

		TODO:移除"正在加载"动画.
	}

	// 数据加载；
	function load_data() {

		if ((is_loading == true || nomore_data == true)) // 如果"没有数据了"或者"加载中",返回.
			return;

		show_loading_anim();// 显示加载动画
		$.ajax({
			type: 'GET',
			url: 'request_url',
			data: 'page=' + ++current_page,
			dataType: 'json',
			success: function (re) {
				rm_loading_anim();// 移出"正在加载..."动画.

				TODO:数据处理；.

				nomore_data = goods.length < 30;// 检查是否已经加载结束.30为分页的大小；

			} // success end
		}); // ajax end
	} // function load_data end
}); //