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 相关文章推荐
非常好的js代码
Jun 27 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
yii2安装详细流程
2018/05/23 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中操作符重载用法分析
2016/04/29 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python有几个版本
2020/06/17 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
公司管理建议书范文
2014/03/12 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
人才市场接收函
2015/01/30 职场文书
农村党员干部承诺书
2015/05/04 职场文书
婚礼父母致辞
2015/07/28 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android