图片预加载，封装可复用
2018-04-26 本文已影响0人
Cherry9507
html
<body>
<div class="box">
<img src="http://s16.sinaimg.cn/orignal/3ea244b9g79e6249ed12f&690" alt="" class="img">
<p>
<a href="javascript:;" class="btn" data-control="prev">上一页</a>
<a href="javascript:;" class="btn" data-control="next">下一页</a>
</p>
</div>
<div class="loading">
<p class="progress">0%</p>
</div>
</body>
css
*{
margin:0;
padding:0;
}
body,html{
width: 100%;
height: 100%;
}
a{
text-decoration: none;
}
.btn{
display: inline-block;
border:1px solid #ccc;
background: #fff;
font-size: 14px;
padding: 5px 10px;
margin-right: 35px;
color: #666;
}
.btn:hover{
background: #eee;
}
.box{
text-align: center;
}
.img{
width: 800px;
margin-bottom: 20px;
}
.loading{
width: 100%;
height: 100%;
position:fixed;
left: 0;
top: 0;
background: #eee;
}
.progress{
font-size: 30px;
position: absolute;
top: 50%;
margin-top: -30px;
left: 50%;
}
js
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script src="preload.js"></script>
<script>
$(function(){
var imgs=[
'http://s16.sinaimg.cn/orignal/3ea244b9g79e6249ed12f&690',
'http://www.deskcar.com/desktop/fengjing/201342152514/11.jpg',
'http://attimg.dospy.com/img/day_120403/20120403_ff7d00e3c8890ac99d0ft829Pq8AcoeE.jpg',
'http://attimg.dospy.com/img/day_120721/20120721_b827a9d749e4d5da6bf6686626zZVAXV.jpg',
'http://img.club.pchome.net/kdsarticle/2014/05/14/c11841cb92ea1ea96cd2bdc232e38515.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284378&di=9a5d70caecd6fdaff87c68e0ab66b37b&imgtype=0&src=http%3A%2F%2Fwww.blue1000.com%2Fupload%2F2010-07%2F100708090875221.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284378&di=c21297d4c0d2b75e64d41fe1b73ae284&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F35a85edf8db1cb1353fd8b78de54564e93584bc0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284363&di=61e67e80de4efbf37aa819279e483b53&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4afbfbedab64034fc321c2edaac379310b551d68.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284355&di=504c4ec88902ad330c96a2bfa92bdcf1&imgtype=0&src=http%3A%2F%2Fa3.topitme.com%2Fb%2F22%2F79%2F11493575500237922bo.jpg'
]
var len = imgs.length,
index = 0;
//此处为插件引入书写形式
$.preload(imgs,{
each:function(count){
$('.progress').html(Math.round((count +1) / len *100 )+"%");
},//每张加载完执行的方法
all:function(){
$(".loading").hide();
}//全部加载完执行的方法
})
// 无预加载功能
$(".btn").click(function(){
// 控制index的值不能无限++或--
if(index<=0){
index = 0
}else if(index>=len-1){
index = len-1;
}
// 点击按钮时的判断
if($(this).data("control") === "prev"){//上一张
Math.max(0,--index);
// console.log('prev:'+index);
}else{//下一张
Math.min(len-1,++index);
// console.log('next'+index);
}
$(".img").attr('src',imgs[index]);
})
})
</script>
插件内容js
(function($){
function PreLoad(imgs,options){
this.imgs = (typeof imgs === "string")?[imgs]:imgs;
this.opts = $.extend({},PreLoad.DEFAULTS,options);
//如果没有执行事件，则默认为null，如果有事件则执行options
this._Unordered();
};
//当无参传入时，设置默认值
PreLoad.DEFAULTS = {
each:null,//，加载完一张所执行的动作
all:null//加载完所有图片所执行的动作
} ;
PreLoad.prototype._Unordered= function(){
var imgs = this.imgs,
opts = this.opts,
len = imgs.length,
count = 0;
$.each(imgs,function(i,val){
var imgObj = new Image();
if(typeof val != "string") return;
$(imgObj).on("load error",function(){
opts.each && opts.each(count);
if(count >= len-1){
opts.all && opts.all();
}
count++;
})
imgObj.src =val;
})
}
$.extend({
preload:function(imgs,opts){
new PreLoad(imgs,opts);
}
})
})(jQuery);
