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 相关文章推荐
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
javascript常用函数(1)
Nov 04 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
webpack入门+react环境配置
Feb 08 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 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脚本的10个技巧(7)
2006/10/09 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
《月迹》教学反思
2014/02/19 职场文书
物业品质提升方案
2014/06/08 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫