用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示的流量,加快页面第一屏显示的速度。
主要原理:通过 setInterval 定时事件,检测滚动条的位置,再进行 ajax 请求服务端数据,加载图片到页面上。
<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>
分享到:
相关推荐
插件描述:jQuery无限滚动瀑布流式显示.
jQuery滚动图片延迟加载插件【一个大神写的】
jQuery无限滚动加载图片瀑布流代码基于jquery-2.0.3.js制作,自适应屏幕分辨率,鼠标滚动图片无限加载。
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
Jquery通过滚动条加载图片,主要语句:[removed]$(".scrollLoading").scrollLoading();[removed] scrollLoading()方法,所有样式名称为scrollLoading的图片都是滚动加载
jQuery无限滚动加载图片瀑布流代码基于jquery-2.0.3.js制作,自适应屏幕分辨率,鼠标滚动图片无限加载。
jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动...
主要介绍了jQuery滚动加载图片实现原理,通过四个方面来说明懒加载技术的原理,感兴趣的小伙伴们可以参考一下
jQuery实现图片动态加载效果 鼠标滚动时图片动态加载
jquery异步加载图片的插件jqGalScroll下载 jquery微型相册插件Micro Image Gallery下载 jQuery把图片放大及变亮特效插件下载 jquery拖动滚动条控制图片滚动及图片放大特效的示例 jquery旋转式图片切换并带图片放大...
jQuery实现无限滚动加载图片瀑布流特效源码.zip
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
实现滚动加载的一个功能函数,需要的朋友可以参考一下
一个大神写的jQuery滚动加载插件scrollLoading测试很好用。
demo.html演试采用的大量图片以瀑布流形式滚动测试,同类型插件,滚动时超级卡,而且BUG较多(我只演试了3-4个同类型的插件)。 而MingGe.scrollLoad 滚动时,则非常流畅,这就是MingGe.scrollLoad的高效性能。
jquery Masonry插件方砖布局图片与内容无限滚动加载
jquery响应式网站瀑布流布局带图片延迟无限滚动加载效果
jquery Loading图片延迟加载是一款滚动页面图片延迟加载效果。