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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
深入了解query和params的使用区别
Jun 24 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
react MPA 多页配置详解
Oct 18 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
如何使JavaScript休眠或等待
Apr 27 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
加强版phplib的DB类
2008/03/31 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python模拟Django框架实例
2016/05/17 Python
Python切片索引用法示例
2018/05/15 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
对Python 语音识别框架详解
2018/12/24 Python
python学生管理系统
2019/01/30 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
迎接领导欢迎词
2014/01/11 职场文书
培训自我鉴定
2014/01/31 职场文书
规范化管理年活动总结
2014/08/29 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
企业年检委托书范本
2014/10/14 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python