JQuery页面随滚动条动态加载效果的简单实现(推荐)


Posted in Javascript onFebruary 08, 2017

Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值:scrollHeight,还有滚动条当前位置属性值:scrollTop。然后通过计算,若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为,该元素overflow样式为scroll,也就是元素中的内容溢出元素指定高度时启用滚动条。利用jquery的load方法为元素加载一个已经存在的文件,我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。

jquery.js“>// 加载jquery库

var hght=0;//初始化滚动条总长
var top=0;//初始化滚动条的当前位置
$(document).ready(function() {//DOM的onload事件
$(”#mypage”).load(”table.html”);//table.html的内容被加载到 mypage元素

$(”#mypage”).scroll( function() {//定义滚动条位置改变时触发的事件。
hght=this.scrollHeight;//得到滚动条总长,赋给hght变量
top=this.scrollTop;//得到滚动条当前值,赋给top变量
});
});

setInterval(”cando();”,2000);//每隔2秒钟调用一次cando函数来判断当前滚动条位置。

function cando(){
if(top>parseInt(hght/3)*2)//判断滚动条当前位置是否超过总长的2 /3,parseInt为取整函数
show();//如果是,调用show函数加载内容。
}

function show(){
$.get(”table.html”, function(data){//利用jquery的get方法得到table.html内容
$(”#mypage”).append(data);//用append方法追加内容到mypage元素。
hght=0;//恢复滚动条总长,因为$(”#mypage”).scroll事件一触发,又会得到新值,不恢复的话可能会造成判断错误而再次加载……
top=0;//原因同上。
});
}

为什么要隔2秒钟调用一次判断呢?因为只要$(”#mypage”).scroll事件一被触发,就会影hght和top值,这个值可能总是满足cando 函数的判断,也就是top值总是位于hght的三分之二。因此可能会多次加载造成服务器负担加重。而每加载一次后把hght和top值赋0,也是这个原因。

这段代码的效果就是只要元素mypage的滚动条位置位于滚动条总长的三分之二时,追加table.html的内容到元素mypage 中去。当然这样运行是无休止地加载下去。在真正的AJAX运用中,table.html可以换成asp或php脚本,接收get或post参数来进行处理,然后返回有意义的数据。jquery的get方法可以设置get方式的参数数据,

比如:

$.get(”test.php”, { name: “boho”, id: “1″ } );

相当于http://hostlocal/test.php?name=boho&id=1

这种形式的http访问。然后通过get方法的回调函数来获取test.php输出的内容:

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});

以上这篇JQuery页面随滚动条动态加载效果的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
setTimeout学习小结
Feb 08 #Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
Move.js入门
Feb 08 #Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 #Javascript
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
php类中private属性继承问题分析
2012/11/01 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
python实现装饰器、描述符
2018/02/28 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python画图高斯分布的示例
2019/07/10 Python
python pillow模块使用方法详解
2019/08/30 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python自省及反射原理实例详解
2020/07/06 Python
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
Java基础面试题
2012/11/02 面试题
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
2019新员工心得体会
2019/06/25 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL