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 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
微信小程序实现上传图片功能
May 28 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 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
改变Apache端口等配置修改方法
2008/06/05 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
JS如何生成动态列表
2020/09/22 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python中str内置函数用法总结
2020/12/27 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
自我鉴定思想方面
2013/10/07 职场文书
小学教师自我鉴定
2013/11/07 职场文书
八年级英语教学反思
2014/01/09 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
党员公开承诺事项
2014/03/25 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
党员证明模板
2015/06/19 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书