最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JQuery页面随滚动条动态加载效果的简单实现
时间：2022-06-25 17:17:08 编辑：袖梨 来源：一聚教程网
Google阅读器上有一个AJAX scollLoad效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其是浏览最新的数据，利用浏览器滚动条来加载，是很好的尝试……
我试着用jquery来实现这个功能。先要得到滚动条的总长属性值：scrollHeight，还有滚动条当前位置属性值：scrollTop。然后通过计算，若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为，该元素overflow样式为scroll，也就是元素中的内容溢出元素指定高度时启用滚动条。利用jquery的load方法为元素加载一个已经存在的文件，我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。
jquery.js“>// 加载jquery库
| 代码如下 | 复制代码 |
varhght=0;//初始化滚动条总长 vartop=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函数来判断当前滚动条位置。
functioncando(){ if(top>parseInt(hght/3)*2)//判断滚动条当前位置是否超过总长的2 /3，parseInt为取整函数 show();//如果是，调用show函数加载内容。 }
functionshow(){ $.get(”table.html”,function(data){//利用jquery的get方法得到table.html内容 $(”#mypage”).append(data);//用append方法追加内容到mypage元素。 hght=0;//恢复滚动条总长，因为$(”#mypage”).scroll事件一触发，又会得到新值，不恢复的话可能会造成判断错误而再次加载…… top=0;//原因同上。 }); } | |
为什么要隔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); }); | |
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20