滚动加载页面

最新推荐文章于 2023-10-03 15:48:42 发布

项慈航

最新推荐文章于 2023-10-03 15:48:42 发布

阅读量650

点赞数

文章标签：滚动加载页面

本文链接：https://blog.csdn.net/zzb521zzb/article/details/11528725

版权

滚动加载页面原理比较简单，即当滚动条距离窗口顶端的距离 + 当前窗口距离 >= 当前文档高度时触发scroll事件，得到新内容后添加到相应元素中。

$(function () {
	//相当于一个同步锁
	var pageLoading = false;
	$(window).scroll(function () {
		if ($(window).height() + $(window).scrollTop() >= $(document).height()) {
			if (pageLoading) return; 
			pageLoading = true;
			try {
				var html = $.ajax('..........');
				if (html.length != 0) {
					//将请求到的内容html添加到相应元素
				} else {
					//移除事件监听
					$(window).unbind('scroll');
				}
			} finally {
				pageLoading = false;
			}
		}
	});
});