预加载页无效
来源：2-3 实例1图片相册之使用预加载
路人Bing
2017-04-27 21:00
为什么我的加载页没效果，直接重0就跳过去了，调试看数组也遍历过了，就是没执行触发load事件后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片预加载之无序加载</title>
<script src="../js/jquery.min.1.7.js"></script>
<style>
html,body{
height: 100%;
}
.box{
text-align: center;
}
.btn,.btn:link{
display: inline-block;
text-decoration: none;
height: 30px;
line-height: 30px;
border: 1px #cccccc solid;
background: #ffffff;
padding: 0px 10px;
margin-right: 50px;
color: #333333;
}
.btn:hover{
background: #dddddd;
}
.loading{
position: fixed;
top:0;
left: 0px;
width: 100%;
height: 100%;
background: #eeeeee;
text-align: center;
font-size: 30px;
}
.progress{
margin-top: 300px;
}
</style>
</head>
<body>
<div>
<p>0</p>
</div>
<div>
<img id="img" src="../imgs/1.jpg" alt="pic" height="800" width="960"/>
<p>
<a href="#" data-control="prev">上一页</a>
<a href="#" data-control="next">下一页</a>
</p>
</div>
<script>
var imgs = ['../imgs/1.jpg','../imgs/2.jpg','../imgs/3.jpg','../imgs/4.jpg','../imgs/5.jpg'];
var now = 0;
var len = imgs.length;
var count = 0;
$progress = $('.progress');
$('.btn').on('click',function () {
if($(this).data('control') ==='prev'){
/*now先自减1再和0比较 若小于0则赋给now*/
now = Math.max(0,--now);
}else if($(this).data('control') ==='next'){
now = Math.min(len-1,++now);
}
document.title = (now+1)+"/"+len
$('#img').attr('src',imgs[now]);
});
$.each(imgs,function (i,src) {
/*图片加载完会触发load事件，出错触发error事件*/
var imgObj = new Image();
/*绑定load事件*/
$(imgObj).on('load',function () {
$progress.html(Math.round(count+1/len * 100)+'%');
if(count>=len-1){
$('.loading').hide();
document.title='1/'+len;
}
count++;
});
imgObj.src = src;
});
</script>
</body>
</html>
写回答
关注
2回答
-
- 呀_明静
- 2017-05-10 15:14:24
$('#img').attr('src',imgs[now]);和imgObj.src = src; 前者是从数组中获取图片的路径，后者又是干什么啦……
-
- 路人Bing
- 2017-04-27 21:48:44
问题差不多想清楚了，我的图片太大，有的浏览器不显示，有的从缓存拿还需要一段时间
图片预加载
预知发生的行为，提前加载需要的图片，获得更好的用户体验
40980 学习 · 81 问题
相似问题