<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8"?/>
<title>Document圖片預(yù)加載</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{
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="1200px"?/>
<p>
<a?href="javascript:;"?data-control="prev">上一頁</a>
<a?href="javascript:;"?data-control="next">下一頁</a>
</p>
</div>
<div>
<p>0%</p>
</div>
<script?src="js/jquery-1.11.1.min.js"></script>
<script?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'
]
var?index?=?0,
?????len?=?imgs.length,
?????count?=?0,
?????$progress?=?$('.progress');
?????$.each(imgs,?function(i,?src){
??????var?imgObj?=?new?Image();
??????$(imgObj).on("load?error",function(){
??????$progress.html(Math.round((count?+1)?/?len*100)?+?'%');
??????if?(count>=len-1)?{
??????$('.loading').hide();
??????document.title?=?'1/'+len;
??????}
??????count++;
??????});
??????imgObj.src?=?src;
?????})
?????$('.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]);
?????})
?????*/
?????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'
]
var?index?=?0,
?????len?=?imgs.length;
?????$progress?=?$('.progress');
?????$.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>//圖片預(yù)加載
(function($)?{
function?PreLoad(imgs,?options){
this.imgs?=?(typeof?imgs?===?'string')???[imgs]?:?imgs;
this.opts?=?$.extend({},?PreLoad.DEFAULTS,?options);//初始化
this._unoredered();//_表示只能內(nèi)部使用，不可以外部調(diào)用
}
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(){
?????? opts.each?&&?opts.each(count);
?????? if?(count>=len-1)?{
?????? opts.all?&&?opts.all();
?????? }
?????? count++;
?????? });
?????? imgObj.src?=?src;
??????});
};
$.extend({
preload?:?function(imgs,opts){
new?PreLoad(img,?opts);
}
});
})(jQuery);
2019-03-30
第一是很多class名沒加上，沒發(fā)現(xiàn)頁面樣式都不起作用嗎，第二js十一行分號格式不對，要英文狀態(tài)輸入，第三就是實例化的時候new Preload(imgs,opts);
2018-09-18
類名沒添加
2018-09-18
添加class="box"
2018-05-15
最后封裝插件那里? 傳的參數(shù)不一致imgs和img
2017-09-21
我看到你的DOM元素沒加class
2017-08-29
2017-08-29
應(yīng)該是unordered而不是unoredered，多寫了一個e