<!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{
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>//图片预加载
(function($) {
function PreLoad(imgs, options){
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
this.opts = $.extend({}, PreLoad.DEFAULTS, options);//初始化
this._unoredered();//_表示只能内部使用，不可以外部调用
}
PreLoad.DEFAULTS = {
each:null, //每一张图片加载完毕后执行
all:null //所有图片加载完毕后执行
}；
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);
这里的分号格式不对