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滚轮事件onmousewheel使用介绍
Nov 01 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 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
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python实现实时视频流播放代码实例
2020/01/11 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
一文读懂Python 枚举
2020/08/25 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
环境工程大学生自荐信
2013/10/21 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
大型活动策划方案
2014/01/12 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
安全承诺书格式范本
2015/04/28 职场文书
css弧边选项卡的项目实践
2023/05/07 HTML / CSS