当前位置：首页 > 下载站 > js特效 > jQuery特效 > jQuery的图片懒加载代码

jQuery的图片懒加载代码

分类: js特效 / jQuery特效	发布时间: 2018-01-26	访问量: 1426
下载量: 50

点击下载预览效果

更多>

最新下载

jquery图片居中放大代码

jquery图片居中放大代码是一款基于jquery实现的鼠标悬停图片居中放大展示代码。

0 2026-03-10

hao123军事频道首页JQ焦点图

hao123军事频道首页JQ焦点图是一款带数字索引按钮，自动轮播切换的jquery焦点图。

0 2026-03-10

JS可拖动放大缩小图片截图代码

JS可拖动放大缩小图片截图代码是一款原生JS图片截图选取特效。

0 2026-03-10

适合做图片类网站的jQuery特效

适合做图片类网站的jQuery特效是一款鼠标经过图片滑动弹出标题效果代码。

0 2026-03-10

小米官网带分类jQuery幻灯片

小米官网带分类jQuery幻灯片是一款带有左右箭头，分类菜单，自动轮播切换的jQuery幻灯片代码。

0 2026-03-10

jquery圆形载入式效果

jquery圆形载入式效果是一款圆形载入式loading进度倒计时特效。

0 2026-03-09

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

18336 2025-08-28
CSS3 教程

1553507 2025-08-27
Rust 教程

25464 2025-08-27
Vue 教程

27154 2025-08-22
PostgreSQL 教程

23535 2025-08-21
Git 教程

10409 2025-08-21

jQuery的图片懒加载代码

js代码
<script src="js/jquery.min.js"></script>
<script>
var _content = []; //临时存储li循环内容
var moreload = {
_default:10, //默认显示图片个数
_loading:5, //每次点击按钮后加载的个数
init:function(){
var lis = $(".moreload .hidden li");
$(".moreload ul.list").html("");
for(var n=0;n<moreload._default;n++){
lis.eq(n).appendTo(".moreload ul.list");
}
$(".moreload ul.list img").each(function(){
$(this).attr('src',$(this).attr('realSrc'));
})
for(var i=moreload._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
$(".moreload .hidden").html("");
},
loadMore:function(){
var mLis = $(".moreload ul.list li").length;
for(var i =0;i<moreload._loading;i++){
var target = _content.shift();
if(!target){
$('.moreload .more').html("<p>全部加载完毕...</p>");
break;
}
$(".moreload ul.list").append(target);
$(".moreload ul.list img").eq(mLis+i).each(function(){
$(this).attr('src',$(this).attr('realSrc'));
});
}
}
}
moreload.init();
</script>