时间:2021-05-26
要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的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);
});
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下:这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必
思路:通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加。脚本:varlastId=0;//记录每一次加载时的最后一条记录id,跟您的
一、jQuery检测浏览器window滚动条到达底部jQuery获取位置和尺寸相关函数:$(document).height()获取整个页面的高度$(windo
本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法。分享给大家供大家参考,具体如下:这里利用AJAX,实现滚动到底加载数据功能:$(function(