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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Js的MessageBox
2006/12/03 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
js 颜色选择插件
2017/01/23 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
机电系毕业生求职信
2014/07/11 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2015年司机工作总结
2015/04/23 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Django框架中模型的用法
2022/06/10 Python