我们在努力扩大自己,以靠近,以触及我们自身以外的世界。
无言博客
一个菜鸟程序员,在复制粘贴的道路上越走越远!!!
Jquery实现滚动加载
无言博客 155 2020-4-25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现滚动加载</title>
<style>
.content{ text-align:center; line-height:30px;}
.nextLoading{ color:#999999; font-size:14px; text-align:center; line-height:30px;}
</style>
</head>

<body>
<div class="content"></div>


<script src="https://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
<script>
	var page = 1,			//初始页码
		loading = false;	//加载标记
	
	$(document).scroll(function() {
		if (loading) return;
		var range = 30;
		var t = $(window).scrollTop();
		var h = $(window).height();
		var scrollHeight = $(document).height();
		var totalHeight = parseFloat(h) + parseFloat(t);
		if (scrollHeight <= totalHeight + range ) {
			loading = true;
			$('body').append('<p class="nextLoading">数据加载中,请稍候...</p>');
			page = page + 1;
			loadNext(page);
			//模拟延迟
			setTimeout(function() {
				$('.nextLoading').fadeOut(200,function(){$(this).remove();});
				loading = false;
			}, 2000);
			
		}
	});
	
	/*加载下一页函数,模拟添加*/
	function loadNext(page){
		var html = '我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>'+
		'我是第'+page+'页的内容<br>';
		if(page > 1){
			$('.content').append(html);
		}else{
			$('.content').html(html);
		}
	}
	
	$(function(){
		//初始加载第一页
		loadNext(page);
	});
</script>
</body>
</html>
END

发表评论: