1.body滚动时
$(document).ready(function () {
});
2.div滚动时
Google阅读器上 有一个AJAXscollLoad效 果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。对于我来说 再好不过了,因为我很不喜欢翻页,尤其是输入页码再定位到页。要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户 体验成熟的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);
});
<script type="text/javascript"></script>
分享到:
相关推荐
jquery 滚动加载,最简单最实用的滚动加载
纯js 无限滚动加载页面数据,手机端无限滚动加载,手机端无限滚动加载
Axure设计—滚动加载(中继器 );Axure设计—滚动加载(中继器 );Axure设计—滚动加载(中继器 )Axure设计—滚动加载(中继器 )Axure设计—滚动加载(中继器 );Axure设计—滚动加载(中继器 )
使用jquerymobile移动框架,利用jquery的ajax滚动加载内容。
使用jquerymobile移动框架,利用jquery的ajax滚动加载内容。
目前大多门户网站加载发表微博等信息时,都应用了滚动加载页面,使其给客户更加友好话,且减少了数据库压力。是不错的技术想法。
模仿360以前的全屏滚动版本,实现全屏滚动及滚动加载,实现transtion的css3动画效果~
listview实现下拉刷新,滚动加载
jQuery懒加载插件页面滚动加载数据代码 jQuery懒加载插件页面滚动加载数据代码
插件描述:jQuery无限滚动瀑布流式显示.
jQuery无限滚动加载图片瀑布流代码基于jquery-2.0.3.js制作,自适应屏幕分辨率,鼠标滚动图片无限加载。
jquery响应式网站瀑布流布局带图片延迟无限滚动加载效果
基于vue的移动端下拉刷新上拉无限滚动加载的高度定制化插件
给需要滚动加载的图片添加上data-url属性,值为图片的真实地址,src属性填写一张默认图片的地址。 方法引用 确定好一个有固定高度,且有滚动条的块级元素后,调用方法imgRunLoading(string id,boolean isConstant)...
MingGe.scrollLoad插件运行速度非常快, demo.html演试采用的大量图片以瀑布流形式滚动测试,同类型插件,滚动时超级卡,而且BUG较多...而MingGe.scrollLoad 滚动时,则非常流畅,这就是MingGe.scrollLoad的高效性能。
无刷新联级,滚动条滚动加载数据,鼠标 ,滚动加载
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI,有如下优势: 同微信客户端一致的视觉效果,令所有微信...
HTMl滚动加载 滚动滚动条 向下加载div
MingGe.scrollLoad滚动加载插件: MingGe.scrollLoad插件运行速度非常快, demo.html演试采用的大量图片以瀑布流形式滚动测试,同类型插件,滚动时超级卡,而且BUG较多(我只演试了3-4个同类型的插件)。 而MingGe....
通过重写ExpandableListView实现分组列表的滚动加载。可以用于评论回复功能中。