下拉滚动条时自动加载所需数据

最新推荐文章于 2024-09-20 16:06:21 发布

蕲雁

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量726

点赞数

分类专栏： javascript 文章标签： jquery插件 function xhtml 新浪微博 div class

本文链接：https://blog.csdn.net/zjanhoo/article/details/8050458

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天研究了一下新浪微博滚动加载的功能, 自己也根据需要做了一个简易版的滚动加载功能, 本来想把它改成jquery插件版本的, 由于时间仓促, 暂时先贴这个简易版的, 以后优化成插件版本时再贴相关代码.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="zh-CN" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<style type="text/css">
		body {
			
		}
		
		blockquote {
			height: 1000px;
		}

		.data {
			width: 800px;
			height: auto;
			border: 1px solid red;
			line-height: 25px;
			text-align: left;
			margin: 20px;
			padding: 10px;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			var tmp = 0,	//通过tmp与scrollTop的比较来判断滚动条的方向
				main = $('.main'),
				num = 1,
				flag = true;

			$(window).scroll(function(){
				var scrollHeight = 0,
					scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
					clientHeight = document.documentElement.clientHeight || document.body.clientHeight,
					obj = $('.main>.data');
				
				if($.browser.msie){
					scrollHeight = document.body.scrollHeight;
				}else{
					scrollHeight = document.documentElement.scrollHeight;
				}
				
				if(tmp < scrollTop && scrollHeight <= scrollTop + clientHeight && num <= 10 && flag){
					var temp = num;

					main.append('<div id="loadMore"><img src="loading.gif" />正在加载，请稍候...</div>');
					flag = false;

					$.get('data.html', {
					
					}, function(result){
						if(result){								
							$('#loadMore').remove();
							main.append(temp + result);
							temp == 10 && main.append('<div id="pagebar">分页</div>');
							flag = true;
						}
					});
					num ++;					
				}
				
				tmp = scrollTop;
			});
		});
    </script>
</head>
<body>
	<blockquote></blockquote>
	<div class="main">
		
	</div>
</body>
</html>