用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示的流量,加快页面第一屏显示的速度。
主要原理:通过 setInterval 定时事件,检测滚动条的位置,再进行 ajax 请求服务端数据,加载图片到页面上。
现有 淘宝商城,3366等网站都有应用。
主要演示代码如下:
<script type="text/javascript">
var iHeight = 0;
var iTop = 0;
var clientHeight = 0;
var iIntervalId = null;
var itemsSize = 0;
var pageNo = 1; // 当前页数,默认设为第 1 页
var pageSize = 4; // 每页显示的数量
getPageHeight();
// 添加定时检测事件,每2秒检测一次
iIntervalId = setInterval("_onScroll();", 2000);
// 取得当前页面显示所占用的高度
function getPageHeight() {
if(document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
iHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
// 调用ajax取服务端数据
function show() {
pageNo++;
$.ajax({
url: 'img.php?p='+pageNo+'&r='+Math.random(),
type: 'GET',
dataType: 'text',
timeout: 4000,
beforeSend: showLoadingImg,
error: showFailure,
success: showResponse
});
}
function showLoadingImg() {
$('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>');
}
function showFailure() {
$('#showmore').html('<font color=red> 获取查询数据出错 </font>');
}
// 根据ajax取出来的json数据转换成html
function showResponse(responseData) {
var returnjson = eval("("+responseData+")");
itemsSize = returnjson.items.length;
var nextpagehtml = '';
var pageOffset = (pageNo-1)*pageSize + 1;
for(i=0; i<itemsSize; i++) {
nextpagehtml += '<ul class="item">';
nextpagehtml += '<li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'"><img src="'+ returnjson.items[i].pic +'" alt="'+ returnjson.items[i].name +'" /></a></li>';
nextpagehtml += '<li class="i_title"><span class="order">'+ (pageOffset + i) +'</span><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'">'+ returnjson.items[i].name +'</a></li>';
nextpagehtml += '</ul>';
}
nextpagehtml += '<div class="clear"></div>';
$('#items').html($('#items').html() + nextpagehtml);
// 当前页码数小于3页时继续显示更多提示框
if(pageNo < 3) {
$('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
} else {
clearInterval(iIntervalId);
$('#showmore').hide();
}
}
// 判断滚动条是否到达底部
function reachBottom() {
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
if((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) {
return true;
} else {
return false;
}
}
// 检测事件,检测滚动条是否接近或到达页面的底部区域,0.99是为了更接近底部时
function _onScroll() {
iTop = document.documentElement.scrollTop + document.body.scrollTop;
getPageHeight();
if(((iTop+clientHeight)>parseInt(iHeight*0.99))||reachBottom()) {
if(pageNo >= 3) {
clearInterval(iIntervalId);
$('#showmore').hide();
return;
}
show();
}
};
</script>
完整源码下载地址:http://www.xuekaifa.com/article/20110119/000414.html
分享到:
相关推荐
页面滚动到底部自动加载数据功能模拟,HTML5+Jquery,需要的下载看一下
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...
实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容;向上滚动到相应的内容区域时也重新加载动画内容! 1.实现思路: 先静态布局好HTML结构,使用伪类:hover...
需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框。最终结果如下图 先分析...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...
jQuery Tab 可关闭的网页选项卡特效,网页上的标签效果,每个TAB标签都可以关闭,就像现在主流的163邮箱、QQ邮箱中的效果,模拟出了PC浏览器的效果,选项卡可以无限制增多,超出宽度会出现滚动条,本演示页面中包括...
-这将会影响所有的aspx页面,一定要将工具条(Toolbars)和Items区分开来。 -祝你生日快乐 - 小师妹妹。 +2009-08-29 v2.0.8 -ExtAspNet支持多语言(en,zh_CN,zh_TW),可以在Web.config中修改。 -将所有的...
-这将会影响所有的aspx页面,一定要将工具条(Toolbars)和Items区分开来。 -祝你生日快乐 - 小师妹妹。 +2009-08-29 v2.0.8 -ExtAspNet支持多语言(en,zh_CN,zh_TW),可以在Web.config中修改。 -将所有的...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...