JQuery页面随滚动条动态加载效果的简单实现(推荐)


Posted in Javascript onFebruary 08, 2017

Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值:scrollHeight,还有滚动条当前位置属性值:scrollTop。然后通过计算,若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为,该元素overflow样式为scroll,也就是元素中的内容溢出元素指定高度时启用滚动条。利用jquery的load方法为元素加载一个已经存在的文件,我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。

jquery.js“>// 加载jquery库

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;//原因同上。
});
}

为什么要隔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页面随滚动条动态加载效果的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js动态添加事件并可传参数示例代码
Oct 21 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
判断访客终端类型集锦
Jun 05 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
setTimeout学习小结
Feb 08 #Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
Move.js入门
Feb 08 #Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 #Javascript
You might like
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
介绍Python中的fabs()方法的使用
2015/05/14 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
如何利用python发送邮件
2020/09/26 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
产品开发计划书
2014/04/27 职场文书
行政监察建议书
2014/05/19 职场文书
结婚保证书
2015/01/16 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
博物馆观后感
2015/06/05 职场文书
导游词之河北白洋淀
2020/01/15 职场文书