通过JQuery和AJAX实现页面数据的动态加载
2012-10-29 17:46
351 查看
对JQuery不咋了解,想实现一个像google图片里的下翻页的效果,闭门造车一番,终于搞定了。
[color=red]
不咋了解其他实现方式,有好的实现方式探讨下。[/color]
我的实现方式没啥难的,有一个需要注意的地方就是设置一个锁,避免onscroll事件触发后多次调用ajax。
另外如果是静态数据内容,比如团购网站的每天团购内容不变化,可以记录刷新到数据的总数量。因为每次数量都是增加的,如果数量没有增加,则说明没有数据了,就不再进行ajax请求,减少后台压力。如果数据是动态刷新的,比如google图片之类的,就不能用这个了。
在本例中,是唱片超市中的唱片,每个唱片框的高度是固定的。唱片超市里的数据基本也是静态的。
大概流程为:
onscroll达到刷新数据的条件->进行ajax获取数据->在数据列表div下通过appendTo增加数据
具体代码如下:
[color=red]踩的哥们要留下意见再走啊[/color]
[color=red]
不咋了解其他实现方式,有好的实现方式探讨下。[/color]
我的实现方式没啥难的,有一个需要注意的地方就是设置一个锁,避免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'));
}
}
);
}
[color=red]踩的哥们要留下意见再走啊[/color]
相关文章推荐
- 动态的把数据显示在table中,点击某一行的删除按钮实现该行的删除(通过ajax实现页面的无刷新加载)
- 动态的把数据显示在table中,点击某一行的删除按钮实现该行的删除(通过ajax实现页面的无刷新加载)
- 原生js,jquery通过ajax获得后台json数据动态新增页面元素
- Echarts通过Ajax实现动态数据加载
- Echarts通过Ajax实现动态数据加载
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- dhl:asp.net mvc下用jQuery通过AJAX 实现HTTP 请求加载远程数据
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- js加载Json数组实现ajax加载动态页面数据
- Echarts通过Ajax实现动态数据加载
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- ajax+jquery+flea+smarty实现了通过选择下拉列表动态显示相应的数据
- 基于jquery的finkyUI插件与Ajax实现页面数据加载功能
- AJAX和jQuery动态加载数据的实现方法
- jQuery页面滚动图片等元素动态加载实现
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- Jquery+Ajax实现Select动态定数据
- 通过使页面动态加载不同CSS实现多界面
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)