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批量修改PS中图层名称的方法
Jan 26 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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画图实例
2014/11/05 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
详解Python字符串切片
2019/05/20 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
客房主管岗位职责
2013/12/09 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
公司周年庆典标语
2014/10/07 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
西岭雪山导游词
2015/02/06 职场文书
优质护理服务心得体会
2016/01/22 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js