jQuery判断div滚动到底部,并加载数据的示例,防止重复加载


var msg_list_loading = false;
$('.msg_list').on('scroll', function(){
if ( ! msg_list_loading ){
load_more_msg();
}
})

function load_more_msg(){
var msg_list = $('.msg_list');
if ( msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60 ) {
msg_list_loading = true;
msg_list.append('<div class="loading"></div>');
$.get('ajax_data.html').done(function( data ){
msg_list.find(".loading").remove();
msg_list.append( data );
msg_list_loading = false;
});
}
}


简单说明:

1、先建立一个变量,判定是否加载中,防止重复加载,

2、在元素上监听scroll事件,调用load_more_msg方法

3、load_more_msg方法中每次重新查找元素,赋给一个变量,判断css高度+滚动的距离,与整个div的文档高度,后面的-60,是一个padding top和bottom的值,可以自行设置。其中msg_list[0]是调用javascript原生对象非jquery对象,方法不同。

4、如果条件为true,锁定加载,ajax调取数据,并执行加载,取消锁定。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值