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 mapreduce工作原理简析
Nov 25 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
vue修饰符.capture和.self的区别
Apr 22 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计算十二星座的函数代码
2012/08/21 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
js实现一键复制功能
2017/03/16 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python实现高斯投影正反算方式
2020/01/17 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
2014年办公室文员工作总结
2014/11/12 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
优秀教研组申报材料
2014/12/26 职场文书
父亲节寄语大全
2015/02/27 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书