通过JQuery和AJAX实现页面数据的动态加载

对JQuery不咋了解，想实现一个像google图片里的下翻页的效果，闭门造车一番，终于搞定了。

不咋了解其他实现方式，有好的实现方式探讨下。

我的实现方式没啥难的，有一个需要注意的地方就是设置一个锁，避免onscroll事件触发后多次调用ajax。

另外如果是静态数据内容，比如团购网站的每天团购内容不变化，可以记录刷新到数据的总数量。因为每次数量都是增加的，如果数量没有增加，则说明没有数据了，就不再进行ajax请求，减少后台压力。如果数据是动态刷新的，比如google图片之类的，就不能用这个了。

在本例中，是唱片超市中的唱片，每个唱片框的高度是固定的。唱片超市里的数据基本也是静态的。

大概流程为：
onscroll达到刷新数据的条件->进行ajax获取数据->在数据列表div下通过appendTo增加数据

具体代码如下：

var lastSize = 0;//最后一次刷新，列表中元素总数量（这种机制不适合动态数据）
var doing = false;//锁，表示是否有onscroll事件在执行刷新操作，这个比较关键
window.onscroll = function() {
	if(doing ==true)
		return;
	var scrollHeight = $(document).scrollTop();//滚动过的高度
	var listBoxHeight = $('.list_box').height(); //每个刷新出图片框的高度
	if(scrollHeight >  listBoxHeight){ 
		var discSize = $("#discSize").val(); //已刷新列表的数量
		var allHeight = $(document).height(); 	
		
		if(allHeight - scrollHeight -listBoxHeight*3 < 0 && discSize!=lastSize){//达到刷新条件（页面高度判断），并且最后一页没有刷新过
			doing = true;//锁 
			lastSize = discSize;//保存最后一页刷新过的size，避免重复刷新最后一页
			ajaxGetDiscList(false);
			doing =false;//释放锁
		}	
	} 
}
function ajaxGetDiscList(refresh){ 
	$.get("..查询url",
		{ ..查询条件}
		,function(result){
			if(refresh==true)//如果是更改了查询条件，则替换原DIV中内容
				$('#shop_con').html(result);
			else{ //在当前查询条件下增加内容
				$(result).appendTo($('#shop_con'));
			}
    	}
  	);
}

踩的哥们要留下意见再走啊

评论

6 楼 风云无浪 2012-10-30  

jbeduhai 写道

有图有真像

不好整图啊，动态滚动才能看到效果。

5 楼 风云无浪 2012-10-30  

xiongjinpeng 写道

可以，挺好的

嘿嘿，谢啦。就是简单了点

4 楼 jbeduhai 2012-10-30  

有图有真像

3 楼 xiongjinpeng 2012-10-30  

可以，挺好的

2 楼 风云无浪 2012-10-30  

raojl 写道

这有点像微博啊

是啊，和新浪微博下拉刷新数据差不多。不过没有刷新转圈的效果，直接就加载数据了。这算个简易的方案

1 楼 raojl 2012-10-30  

这有点像微博啊