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调取数据,并执行加载,取消锁定。
分享到:
相关推荐
页面滚动到底部自动加载数据功能模拟,HTML5+Jquery,需要的下载看一下
jQuery局部div滚动加载远程数据
jQuery懒加载插件页面滚动加载数据代码 jQuery懒加载插件页面滚动加载数据代码
jquery滚动滚动条加载数据 类似瀑布流 像QQ空间 动态加载数据 效果很不错
一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如:加载a.html里面的<div id=“row”></div>这个div里面的所有内容加载到b.html的这个div里<div id=”content...
jquery 滚动到底部时自动加载更多。简单思路仅供参考,不足之处请多包涵,相互学习共同进步。参考文章:http://blog.csdn.net/djk8888/article/details/53781452。我的腾讯微博:http://t.qq.com/djk8888
jquery 滚动加载,最简单最实用的滚动加载
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能,他能帮助新手和高级开发者们创造美好的用户体验。 jquery滚动到顶部底部仅向上效果: 点击查看演示: jquery滚动到顶部...
本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法。分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
Jquery实现手机端上拉滚动加载更多数据功能手指滑动,完美实现多数据分布加载效果。数据再多页面流畅展示。
当某一div块区域,设定了固定高度,和overfloat滚动后,要进行滚动到区域底部后的加载或其他操作时,需要知道何时到达底部,此代码解决了这个问题
jquery仿新浪微博鼠标滚动到底部加载内容
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ...
sly jquery定制div滚动条Scrollbar 兼容IE6 FireFox Safari
滚动条到底部加载数据原理很简单,就是为window或者滚动元素添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部, 如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,...
jquery监听DIV的事件,可监听DIV的变化的事件,直接引用即可使用
插件描述:jQuery无限滚动瀑布流式显示.