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

要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的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>

以上是 jquery浏览器滚动加载技术实现方案 的全部内容, 来源链接: utcz.com/z/334533.html

回到顶部