JQuery页面随滚动条动态加载效果实现

转载 2016年06月02日 10:53:20

Google阅读器上 有一个AJAX scollLoad效果很 不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户 体验成熟的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”>

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

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});

Jquery无限滚动加载插件

$(document).endlessScroll({ fireOnce: false, fireDelay: false, loader: "", callback:...

jquery.scrollLoading实现图片滚动加载

一、关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说淘宝商城页面。页面图片数量多,而且比较大时。要是页面载入就一次性加载完毕,需要用户等半天。所以针对这种情况,目前很流...

页面滚动动态加载数据,页面下拉自动加载内容

$(document).ready(function(){ var range = 50; //距下边界长度/单位px var elemt = ...

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件 本人小菜鸟一只,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,服务器...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

JQuery实现页面随滚动条滚动而动态加载内容的效果

新浪微博有这个功能,刚才思考一下 ,简单的写了一下实现方法,代码是Js的.       无可否认,这种方式应该算是web2.0的产物,在用户体验上具备很好的感受,除了微博在使用该方式外,另外我还...

jQuery 跟随滚动条漂浮层 置顶效果

http://www.w3.org/1999/xhtml">                                 #test          {      ...

JQuery页面随滚动条动态加载效果实现

Google阅读器上 有一个AJAX scollLoad效果很 不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频...

JQuery实现页面随滚动条滚动而动态加载内容的效果

JQuery实现页面随滚动条滚动而动态加载内容的效果 2011-01-16 21:13       新浪微博有这个功能,刚才思考一下 ,简单的写了一下实现方法,代码是Js的...
  • lsk_jd
  • lsk_jd
  • 2012年05月25日 21:57
  • 1279

【转】JQuery实现页面随滚动条滚动而动态加载内容的效果

新浪微博有这个功能,刚才思考一下 ,简单的写了一下实现方法,代码是Js的.       无可否认,这种方式应该算是web2.0的产物,在用户体验上具备很好的感受,除了微博在使用该方式外,另外我还...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery页面随滚动条动态加载效果实现
举报原因:
原因补充:

(最多只允许输入30个字)