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 自定义类型方法小结
Mar 02 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
Vue简单实现原理详解
May 07 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
js格式化时间的方法
2015/12/18 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
利用JS实现数字增长
2016/07/28 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python 识别图片中的文字信息方法
2018/05/10 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
没编程基础可以学python吗
2020/06/17 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
教师现实表现材料
2014/02/14 职场文书
核心价值观演讲稿
2014/05/13 职场文书
党性观念心得体会
2014/09/03 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫