当前位置:  编程技术>WEB前端

jquery浏览器滚动加载技术实现方案

    来源: 互联网  发布时间:2014-08-25

    本文导语:  要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据,尤其是浏览最新的数据,利用浏览器...

要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值:scrollHeight,还有滚动条当前位置属性值:scrollTop。然后通过计算,若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为

,该元素overflow样式为scroll,也就是元素中的内容溢出元素指定高度时启用滚动条。利用jquery的load方法为元素加载一个已经存在的文件,我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。

代码如下:

//加载jquery库
gh

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://localhost/test.php?name=boho&id=1这种形式的http访问。然后通过get方法的回调函数来获取test.php输出的内容:

代码如下:

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});

    
 
 

您可能感兴趣的文章:

  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery预加载插件 jQuery-preloader
  • jQuery数据延迟加载插件 DataLazyLoad
  • jQuery 页面加载 fakeLoader.js
  • jQuery页面加载完毕再执行代码多种方法
  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法
  • jQuery 加载器插件 ClassyLoader
  • jQuery 图像延迟加载插件 BttrLazyLoading
  • jQuery 视频延迟加载插件 lazyYT.js
  • JQuery在页面加载完成时执行函数的示例代码
  • jQuery 图像加载插件 ChickenDinner.js
  • jQuery图片加载插件 QueryLoader
  • Jquery在指定DIV加载HTML示例代码
  • jquery为动态加载的元素绑定事件的代码
  • jquery实现在页面加载完毕后获取图片高度或宽度
  • jquery跟js初始化加载的多种方法及区别介绍
  • Jquery图片加载插件 imagesloaded
  • jquery代码-如何检查图像是否已完全加载
  • 在页面加载完成后通过jquery给多个span赋值
  • 使用jQuery动态加载js脚本文件的方法
  • jquery Ajax 实现加载数据前动画效果的示例代码
  • jQuery文件浏览器插件 jQuery File Tree
  • jquery检测浏览器名称和版本信息的例子
  • jquery判断浏览器后退时候弹出消息的方法
  • jquery浏览器判断函数代码
  • Jquery 获取浏览器的宽度与高度
  • jquery判断浏览器后退时弹出消息的例子
  • 浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
  • jquery判断浏览器类型($.browser用法)
  • jquery代码-如何检测各种浏览器
  • Jquery $.browser判断浏览器信息的方法介绍
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • JQuery实现元素屏幕居中显示的代码
  • jquery 回车登录的实现方法
  • 基于jQuery实现的MVC开发框架 CorMVC
  • 简单的代码实现jquery定时器
  • WEB前端 iis7站长之家
  • jquery插件开发之实现jquery手风琴功能分享
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery实现的导航固定效果
  • jquery实现点击消失的代码
  • jquery 实现弹出div位于屏幕正中(图文)
  • jQuery 表格隔行换色 鼠标高亮行变色的实现代码
  • jquery特效 table鼠标滑过变色的实现代码
  • Jquery点击高亮显示的实现代码
  • jquery实现图片路径不存在时进行替换的代码
  • jquery 选择块与改变属性值的实现方法
  • 60秒倒计时的jquery实现代码
  • jquery半透明设置实现代码
  • jquery 实现文本框焦点自动跳转
  • jquery实现弹出层完美居中效果
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3