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 相关文章推荐
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JS返回顶部实例代码
Aug 09 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
vue+canvas实现拼图小游戏
Sep 18 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数组
2006/10/09 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python http基本验证方法
2018/12/26 Python
python命令行工具Click快速掌握
2019/07/04 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
应届生如何写自荐信
2014/01/05 职场文书
二年级数学教学反思
2014/01/21 职场文书
2014年教师节寄语
2014/08/11 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js