js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法


Posted in Javascript onFebruary 08, 2017

页面滚动动态加载数据,页面下拉自动加载内容

相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多

有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志

今天我们就来看看他们的实现思路和js控制动态加载的代码

下面的代码主要是控制滚动条下拉时的加载事件的

在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 

别忘了引用jquery类库

$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作





//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;



//redgiftList(page);



//$("#redgiftNextPage").attr('currentpage', page + 1);

    }
  });

解析:

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

以上这篇js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
Move.js入门
Feb 08 #Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 #Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 #Javascript
简单实现bootstrap导航效果
Feb 07 #Javascript
vue.js实现请求数据的方法示例
Feb 07 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php标签云的实现代码
2012/10/10 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
基于node.js之调试器详解
2017/08/22 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
wxPython中listbox用法实例详解
2015/06/01 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
tensorflow更改变量的值实例
2018/07/30 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python class的继承方法代码实例
2020/02/14 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
优秀民警事迹材料
2014/01/29 职场文书
婚前协议书
2014/04/15 职场文书
升学宴学生致辞
2015/07/27 职场文书
如何撰写促销方案?
2019/07/05 职场文书