jquery浏览器滚动加载技术实现方案


Posted in Javascript onJune 03, 2014

要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试……

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

<script type=”text/javascript” src=”jquery.js“>//加载jquery库</script>
<script type=”text/javascript”> gh
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;//原因同上。
});
}
</script>
<div id=”mypage”></div>

为什么要隔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://localhost/test.php?name=boho&id=1这种形式的http访问。然后通过get方法的回调函数来获取test.php输出的内容:

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});
Javascript 相关文章推荐
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
Javascript基础之数组的使用
May 13 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 #Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 #Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 #Javascript
node.js实现多图片上传实例
Jun 03 #Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 #Javascript
jquery处理json数据实例分析
Jun 03 #Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 #Javascript
You might like
php preg_replace替换实例讲解
2013/11/04 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
python开发之文件操作用法实例
2015/11/13 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
对python中的argv和argc使用详解
2018/12/15 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
python调用百度API实现人脸识别
2020/11/17 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
印尼旅游网站:via
2017/11/12 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
安全生产管理责任书
2014/04/16 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
机动车登记业务委托书
2014/10/08 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers