基本效果同前一篇，业务有所变化：前一篇是先显示进度条待所有的图片加载完成了再显示图片，这一篇是先显示第一张图片然后依次加载其他图片（比较适合于有内容的图片，人在看第一张图片时程序默默的加载后面的图片）
然后还是那几句：
这个特效是跟着慕课网上的视频学的，视频链接如下：https://www.imooc.com/learn/502
源码和技术点已经上传到附件，有需要的可以查看、下载。
下面直接上代码（PS：代码中的注释是根据个人理解添加的，并不是老师原有的注释）：
1、页面基本结构：
2、CSS样式：
3、JS代码（附件中JS文件夹下demo2_preload(有序加载，非插件).js）：
//图片数组
var imgs=[
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498048638722&di=93633bebf0b1fc921fc42e8d0644e9c1&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201604%2F12%2F210015dj7ay5yw9ylaymmn.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046785208&di=2e693fe255f7dc064bf940d16b5d8b6b&imgtype=0&src=http%3A%2F%2Fbbsfiles.vivo.com.cn%2Fvivobbs%2Fattachment%2Fforum%2F201601%2F06%2F113313hbbbrf3fqw3qzbxp.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046876926&di=78448958bad3463d63acb892052582fa&imgtype=0&src=http%3A%2F%2Fstatic01.coloros.com%2Fbbs%2Fdata%2Fattachment%2Fforum%2F201506%2F22%2F230200woaarrmta41rgket.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046913853&di=ee33b4635aa2fad919360084ff52ff43&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201502%2F13%2F174551vk3qq9nyeq965kml.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046893014&di=d038443067de0796e68e70464768da83&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201410%2F25%2F220832wlwzqq6ble9ql6rd.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046883822&di=9190192e9187c4f9098eded1b593b5f4&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201503%2F06%2F162347xwvgpdfpw5p7rvvv.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498641626&di=6405f296231e22070f1e2eeafe631b88&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.iforworld.com%2Fbizhi%2F4k%2Fpic%2F20160224%2F003.JPG",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046940019&di=b91053d71c20207d04cfc6d3cb386067&imgtype=0&src=http%3A%2F%2Fi7.download.fd.pchome.net%2Ft_2560x1600%2Fg1%2FM00%2F12%2F1A%2FooYBAFaxvnaIYS82AB4dTtRS-E4AAC3fwLtL7EAHh1m451.jpg"
];
var len = imgs.length;//图片数量
var count=0;//加载到了第几张图片
var index = 0;//当前浏览到的第几张图片
$(function(){
load();//开始加载图片
//按钮的点击事件
$(".btn").click(function(){
if("prev"===$(this).attr("data-control")){//上一张
index--;//下标减小
if(index<0) index = 0;
//index = Math.max(0,--index);//index先--，之后得到的值与0比较，返回较大的值
}else{//下一张
index++;//下标增大
if(index>len-1){//数组下标从0开始
index = len-1;
}
//index = Math.min(len-1,++index);
}
document.title=(index+1)+"/"+len;
$("#imgArea").attr("src",imgs[index]);
});
//有序加载图片
function load(){
var imgObj = new Image();
$(imgObj).bind("load error",function(){
if(count>=len){//说明图片加载完成了
}else{
load();//继续加载
}
count++;
});
imgObj.src = imgs[count];
}
});
4、将第三步中加载图片的代码写成插件进行调用：
插件代码（附件中JS文件夹下preload.js）：
//图片预加载
//使用闭包模拟局部作用域
/*
(function(){
})();
*/
//传入jQuery对象，用$来接收，这样子就可以使用jQuery了
/*
(function($){
})(jQuery);
*/
(function($){
//构造函数
//imgs:图片数组
//options:参数
function PreLoad(imgs,options){
//若传入图片数组的是字符串，手动转成数组
this.imgs = ((typeof imgs)==="string"?[imgs]:imgs);
//将传入的options参数替换掉默认的PreLoad.DEFAULTS，生成一个新的对象，并返回给this.opts
this.opts = $.extend({},PreLoad.DEFAULTS,options);
if(this.opts.order==='ordered'){//有序加载
this._ordered();//调用有序加载的方法
}else{
//无序方法:下划线表示这个方法只在内部使用，不提供外部调用
this._unordered();
}
}
//设置默认参数
PreLoad.DEFAULTS={
order:'unordered',//默认采用无序加载
each:null,//每一张图片加载完成后执行
all:null//所有图片加载完成后执行
};
//在原型上添加无序加载的代码
PreLoad.prototype._unordered=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.src = src;
//正常加载或加载失败都执行该方法，以避免“加载失败时页面一直都显示正在加载数据”的问题
$(imgObj).bind("load error",function(){
opts.each && opts.each(count);
//当图片预加载完成显示第一张图片的信息
if(count>=len-1){
//显示图片
opts.all && opts.all();//若是有all就调用all()方法
}
count++;
});
});
};
//在原型上添加有序加载的代码
PreLoad.prototype._ordered=function(){
//预加载各张图片
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
load();
function load(){
var imgObj = new Image();
$(imgObj).bind("load error",function(){
opts.each && opts.each(count);
if(count>=len){//说明图片加载完成了
opts.all && opts.all();//若是有all就调用all()方法
}else{
load();//继续加载
}
count++;
});
imgObj.src = imgs[count];
}
};
//定义一个工具方法
$.extend({
preload:function(imgs,opts){
new PreLoad(imgs,opts);
}
});
})(jQuery);
//插件学习方法：
//无序加载：http://www.imooc.com/video/14434/0
//有序加载：https://www.imooc.com/video/14440
该有序加载的插件是在原来的无需加载插件的基础上改的，改动的主要有三个地方：
a、function PreLoad(中添加判断：
if(this.opts.order==='ordered'){//有序加载
this._ordered();//调用有序加载的方法
}else{
//无序方法:下划线表示这个方法只在内部使用，不提供外部调用
this._unordered();
}
b、PreLoad.DEFAULTS={中添加属性：order:'unordered',//默认采用无序加载
c、添加_ordered方法：
//在原型上添加有序加载的代码
PreLoad.prototype._ordered=function(){
//预加载各张图片
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
load();
function load(){
var imgObj = new Image();
$(imgObj).bind("load error",function(){
opts.each && opts.each(count);
if(count>=len){//说明图片加载完成了
opts.all && opts.all();//若是有all就调用all()方法
}else{
load();//继续加载
}
count++;
});
imgObj.src = imgs[count];
}
};
页面调用：第三步JS中“有序加载图片”的代码由原来的改成以下内容：
//使用插件加载图片
$.preload(imgs,{
order:'ordered'//使用有序加载
});
（PS：附件中的demo2(图片有序加载).html就是使用插件进行加载的）
最后，感谢老师，也祝大家好运！
