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 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
DOM 高级编程
May 06 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
vue多次循环操作示例
2019/02/08 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
初中英语演讲稿
2014/04/29 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
贷款工作证明模板
2015/06/12 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
Django显示可视化图表的实践
2021/05/10 Python
如何在C++中调用Python
2021/05/21 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python