HTML部分：
---------------------------------------------------------------------------start ------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box{
width: 100%;
text-align: center;
padding: 61px 0;
}
#img_box img{
width: 50%;
}
a{
display: inline-block;
width: 80px;
padding: 10px 0;
text-decoration: none;
}
a:hover{
cursor: pointer;
background-color: #eaeaea;
}
.progree{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: gray;
text-align: center;
line-height: 50;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<div id="img_box">
<img src="img/1.jpg"/>
</div>
<p id="btn_box">
<a class="pre">上一张</a>
<a class="next">下一张</a>
</p>
</div>
<div class="progree">
加载中....0%
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/preload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var imgs = [],
index = 0;
//图片数组
for( var i = 0;i < 6; i++ ){//循环添加
imgs.push("img/"+(i+1)+".jpg")
}
var len = imgs.length;
//传统模式 点击一张加载一张
// $("a").on("click",function(e){//点击事件
// e.stopPropagation();
// if( $(this).attr("class")==="pre" ){
// index--;
//
// index = Math.max(0,index);
// }else{
// index++;
// index = Math.min(index,len-1);
// }
//
// $("img").attr("src",img[index])
// })
//预加载模式 无序加载
// $.each(imgs, function(i,src) {
// var imgr = new Image();
// $(imgr).on('load error',function(){
// $(".progree").text("加载中..."+Math.round((count+1)/len*100)+"%")
//
// if( count>=(len-1) ){
// $(".progree").hide();
// }
// count++;
//
//
// })
// imgr.src = src;
// });
//利用自己封装的jq图片预加载插件
$.fPreLoad( imgs,{
each:function( len,count ){//回调函数一
$(".progree").text("加载中..."+Math.round((count+1)/len*100)+"%")
},
all:function(){//回调函数二
$(".progree").hide();
}
} )
$("a").on("click",function(e){//点击事件
e.stopPropagation();
if( $(this).attr("class")==="pre" ){
index--;
index = Math.max(0,index);//利用取最值法控制index边界必须大于0
}else{
index++;
index = Math.min(index,len-1);//利用取最值法控制index边界必须小于len-1
}
$("img").attr("src",imgs[index])//改变目标img的src
})
</script>
</body>
</html>
---------------------------------------------------------------------------end------------------------------------------------------------------------------
JS部分：
---------------------------------------------------------------------------start ------------------------------------------------------------------------------
(function($){//图片预加载 封装方式一 面向对象
function preLoadWay1( imgs,options ){
this.imgs = (typeof imgs==='string')?[imgs]:imgs;//判断如果是单张图片时将它变为数组 方便后面循环
this.opts = $.extend({}, preLoadWay1.DEFAULTOPT, options);
this._funOrderLoad();
}
//定义无序加载方法
preLoadWay1.prototype._funOrderLoad = function(){
var len = this.imgs.length,
count = 0,
opts = this.opts;
//遍历图片对象
$.each(this.imgs, function(i,src) {
var imgr = new Image();
$(imgr).on('load error',function(){
//$(".progree").text("加载中..."+Math.round((count+1)/len*100)+"%")//这是个很具体的操作可以单独领出来
opts.each && opts.each(len,count)
if( count>=(len-1) ){
opts.all && opts.all()//图片全部加载完成后执行的回调
//$(".progree").hide();
}
count++;
})
imgr.src = src;//只有将图片路径赋值给了该对象才会执行load加载对应路径的图片
});
}
preLoadWay1.DEFAULTOPT = {//定义一个默认的参数对象
each:null,//每一张图片加载完后执行的回调函数
all:null//所有图片加载完后执行的回调函数
};
//利用jq插件封装的方式 将这个封装成插件 两种封装方式 1.$.fn.extend -->这种方式调用时需要选定标签 2.$.extend -->这种方式可以$.调用
$.extend({
fPreLoad:function( imgs,options ){
new preLoadWay1( imgs,options )
}
})
}(jQuery))
(function($){//图片预加载 封装方式一 对象关联法
}(jQuery))
---------------------------------------------------------------------------end------------------------------------------------------------------------------