卡在0%，對了好幾遍找不到原因
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
html,body{
height:?100%;
}
a{
text-decoration:?none;
}
.box{
text-align:?center;
}
.btn{
display:?inline-block;
height:?30px;
line-height:?30px;
border:?1px?solid?#ccc;
background-color:?#fff;
padding:?0?10px;
margin-right:?50px;
color:?#333;
}
.btn:hover{
background-color:?#eee;
}
.loading{
position:?fixed;
top:?0;
left:?0;
width:?100%;
height:?100%;
background-color:?#eee;
text-align:?center;
font-size:?30px;
}
.progress{
margin-top:?300px;
}
</style>
</head>
<body>
<div>
<img?src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg"?alt="pic"?id="img"?width="1200"?/>
<p>
<a?href="javascript:;"?data-control="precv">上一頁</a>
<a?href="javascript:;"?data-control="next">下一頁</a>
</p>
</div>
<div>
<p>0%</p>
</div>
<script?type="text/javascript"?src="js/jquery-3.2.0.min.js"></script>
<script?type="text/javascript"?src="js/preload.js"></script>
<script?type="text/javascript">
var?imgs=[
'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg?',
'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg?',
'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg?'
];
//?index表示當(dāng)前是第幾張圖片
var?index=0,
//?count表示加載了幾張圖片
$progress=$(".progress"),
len=imgs.length;
$.preload(imgs,{
each:function(count){
$progress.html(Math.round((count+1)/len*100)+"%");
},
all:function(){
$(".loading").hide();
document.title="1/"+len;
}
});
$(".btn").on("click",function(){
if("prev"===$(this).data("control")){????//上一張
index=Math.max(0,--index);
}else{??????????//下一張
index=Math.min(len-1,++index);
}
document.title=(index+1)+"/"+len;
$("#img").attr("src",imgs[index]);
})
</script>
</body>
</html>preload.js
//?圖片預(yù)加載
//?使用閉包模擬局部作用域?使得內(nèi)部的變量不會與外部產(chǎn)生沖突
//?將jQuery傳入匿名函數(shù)中?并用$接收??在閉包函數(shù)內(nèi)可以使用jQuery
(function($){
function?Preload(imgs,options){
//?傳遞進(jìn)來的參數(shù)是數(shù)組還是字符串
this.imgs=(typeof?imgs==="string")?[imgs]:imgs;
this.opts=$.extend({},Preload.DEFAULTS,options);
this._unoredered();
}
Preload.DEFAULTS={
each:null,//每一張圖片加載完畢后執(zhí)行
all:null??//所有圖片加載完畢后執(zhí)行
}
Preload.prototype._unoredered=function(){
var?imgs=this.imgs
opts=this.opts,
count=0,
len=imgs.length;
$.each(imgs,function(i,src){
if(typeof?src!="string")
return;
var?imgObj=new?Image();
$(imgObj).on("load?error",function(){
$(imgObj).on("load?error",function(){
//?判斷each是否存在
opts.each?&&?opts.each(count);
if(count>=len-1){
opts.all?&&?opts.all();
}
count++;
});
imgObj.src=src;
})
})
}
$.extend({
preload:function(imgs,opts){
new?Preload(imgs,opts);
}
});
})(jQuery);
2017-06-10
細(xì)節(jié)問題：.html文件的 76行 p標(biāo)簽的類名和85行div的類名未加到對應(yīng)的DOM結(jié)構(gòu). 當(dāng)然這并不是導(dǎo)致無法加載圖片的原因。
一直卡在加載頁面的問題是在.js文件的27行到39行之間，on('load'，function())等價于onload事件，onload事件是在加載完畢才觸發(fā)的事件，而在38行你將img的sec屬性賦值放在了onload事件觸發(fā)函數(shù)內(nèi)，這就意味著在觸發(fā)onload事件之前img元素沒有初始化src屬性，即不會去加載，也就不存在加載完畢。將imgObj.src=src;移到onload函數(shù)外部即可。注：不要嘗試在onload觸發(fā)函數(shù)修改img(加載控件)的src(資源地址),否則會進(jìn)入死循環(huán).另外27與28行兩個onload綁定事件嵌套則完全沒必要，
附上js文件each遍歷函數(shù)修改部分：
$.each(imgs,?function?(i,?src)?{ ????if?(typeof?src?!=?"string") ????????return; ????var?imgObj?=?new?Image(); ????$(imgObj).on('load?error',?function?()?{ ????????//?判斷each是否存在 ????????opts.each?&&?opts.each(count); ????????if?(count?>=?len?-?1)?{ ????????????opts.all?&&?opts.all(); ????????} ????????console.log(count); ????????count++; ????}); ????imgObj.src?=?src; });還有問題請回復(fù)，求采納！