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 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
用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&java(三)
2006/10/09 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
老生常谈Python基础之字符编码
2017/06/14 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python如何读写csv数据
2018/03/21 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
django 外键创建注意事项说明
2020/05/20 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
公司前台辞职报告
2014/01/19 职场文书
主管会计岗位责任制
2014/02/10 职场文书
简单的项目建议书模板
2014/03/12 职场文书
教师考核材料
2014/05/21 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
mysqldump进行数据备份详解
2022/07/15 MySQL
Windows7下FTP搭建图文教程
2022/08/05 Servers