之前Google的图片搜索结果界面提供了一个功能,即滚动条滚动到接近底部的位置自动加载剩余图片。个人觉得这个功能还蛮人性化的,避免来回翻页的繁琐,让搜索结果以增量形式展现。所以也自己仿造了一个。功能是基于JQuery的。下面是代码。
$(window).scroll(function() {
var o = $('#pincontainer');
// 并不是所有页面都要执行加载操作。
// 你也可以选择别的识别条件。
if(o!=null && o.length !=0){
//获取网页的完整高度(fix)
var hght= window.scrollHeight;
//获取浏览器高度(fix)
var clientHeight =window.clientHeight;
//获取网页滚过的高度(dynamic)
var top= window.pageYOffset ||
(document.compatMode == 'CSS1Compat' ?
document.documentElement.scrollTop :
document.body.scrollTop);
//当 top+clientHeight = scrollHeight的时候就说明到底儿了
if(top>=(parseInt(hght)-clientHeight)){
show();
}
}
});
//我所要执行的操作是把ajax取得的数据塞到目标div中
function show(){
var target = $('#pincontainer');
if(!target){return false;}
//一般你都要记录一下你的数据的录入状态,比如到当前显示页码
var current_page = parseInt(target.attr('index'));
//还要记录一个最大显示页码,以阻止请求溢出
var max_page = parseInt(target.attr('maxPages'));
if(current_page >= max_page){
return false;
}
var data={};
data.nextPage = parseInt(current_page)+1;
var currentHref = window.location;
// 有的时候可能还要从url中读取参数,我使用正则式
var tcaStr = new RegExp("(^|)tca=([^\&]*)(\&|$)","gi").exec(currentHref);
if(tcaStr) data.tca = tcaStr[2];
var scaStr = new RegExp("(^|)sca=([^\&]*)(\&|$)","gi").exec(currentHref);
if(scaStr) data.sca = scaStr[2];
var tagStr = new RegExp("(^|)tag=([^\&]*)(\&|$)","gi").exec(currentHref);
if(tagStr) data.tag = tagStr[2];
// ajax请求数据
jQuery.ajax({
type:"POST",
url: "/show/getPins/",
data:data,
dataType: "json",
beforeSend: function(XMLHttpRequest){
$("#loading").css('display','');
},
success:function(response) {
if(response.data){
for(var i=0, length = response.data.length; i<length; i++){
var html = response.data[i];
var test = $(html);
target.append(test);
var img = test.find('img');
X.util.flowPin(img[0],188);
}
target.attr('index',parseInt(current_page)+1);
$("#loading").css('display','none');
}
},
error:function(){
alert("加载失败");
}
});
return false;
}
这个功能的一个关键成败点是scrollTop的计算。刚开始我只使用了document.body.scrollTop,但是这个数值在chrome中一直显示0,于是有了上面的多浏览器兼容计算方法。
//获取网页滚过的高度(dynamic)
var top= window.pageYOffset ||
(document.compatMode == 'CSS1Compat' ?
document.documentElement.scrollTop :
document.body.scrollTop);
改进:考虑到有些用户并不喜欢自动加载的功能,可以在页面上添加“取消自动加载”的按钮,换以按钮控制。
分享到:
相关推荐
页面滚动到底部自动加载数据功能模拟,HTML5+Jquery,需要的下载看一下
当拖动滚动条时会自动加载图片页面,由于数据量庞大,如果一次性完全加载的话,会消耗大量的带宽,通过边拖动滚动条边加载可以加载更多数据。
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,...
设置页面加载时滚动条自动滚到底的方法: jQuery: 代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); JavaScript: 代码如下: [removed] = ...
主要介绍了基于javascript实现浏览器滚动条快到底部时自动加载数据的相关资料,需要的朋友可以参考下
参数说明 listLoadingMore({id:"",id2:function(){},...loading():根据当前滚动条的位置,自动判断是否需要加载新数据; show(boolean,boolean):强制设置加载中和加载完成dom的显示或隐藏,true表示显示,false相对。
主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下
如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡。 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动...
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果: ...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...
UI自动化中经常会遇到元素识别不到,找不到的问题,原因有很多,比如不在iframe里,xpath或id写错了等等;但有一种是在当前显示的页面元素不可见,拖动下拉条后元素就出来了。 比如下面这样一个网页,需要进行拖动下...
当初进行项目的时候没有找到合适的代码(找到的很多都是滚动条拖到底自动出现,没有点击出现的),并且要实现一个页面多个点击加载,所以动手写了一个,实现方法简单,调试方便,基于真实项目的实现设计,直接就可以...
ScrollBar.js - 模拟滚动条特性支持竖向(v)、横向(h)、自动双向(auto)三种方向设置支持自动检查容器大小变化而重新调整(多用于图片加载,ajax填充内容等)支持响应鼠标滚轮,触屏设备的touch行为资源引用<...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...