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的cookie的用法
Jan 10 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
详解javascript高级定时器
Dec 31 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 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
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
百度地图API使用方法详解
2015/08/25 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python yield与实现方法代码分析
2018/02/06 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
如何通过Python实现标签云算法
2019/07/02 Python
python匿名函数用法实例分析
2019/08/03 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
留守儿童工作方案
2014/06/02 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
投标单位介绍信
2015/05/05 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python