1、先介绍一下面向对象的函数图片预加载写法
var num=3;//这个定义为3是因为图片名称定义，在给图片起名一般是其他是固定，同一个位置修改为不同数字
var list=[];//空数组用来存加载完成的
init();
function init(){
var img=new Image(); //创建一个Image对象
img.addEventListener("load",loadHandler);//给img对象添加一个侦听事件，是load加载事件
img.src="img/3-.jpg";//img.src属性值赋值（这个图片的名称是）
}
function loadHandler(e){ //加载完后
list.push(this.cloneNode(false));//向list，push括号内的元素，括号内的元素来自于浅复制，cloneNode就是浅复制，语法是目标对象.cloneNode（false），这里this是img
num++;
if(num>8){ //当大于8就跳出不执行下面语句了，否则继续执行下面的语句
console.log(list);//打印查看
return;
}
this.src="img/"+num+"-.jpg";//图片的地址（要看你HTML与img 图片的相对地址），
}
2、回调地狱写法，过程写法
var list=[];
var img=new Image();
img.src="img/3-.jpg";
img.onload=function(){
list.push(this);
img=new Image();
img.src="img/4-.jpg";
img.onload=function(){
list.push(this);
img=new Image();
img.src="img/5-.jpg";
img.onload=function(){
list.push(this);
img=new Image();
img.src="img/6-.jpg";
img.onload=function(){
list.push(this);
img=new Image();
img.src="img/7-.jpg";
img.onload=function(){
list.push(this);
img=new Image();
img.src="img/8-.jpg";
img.onload=function(){
list.push(this);
}
}
}
}
}
}
console.log(list);
3、promise 解决回调地狱
function loadImg(_src){ //传入地址参数
// resolve 标志成功时执行的语句
// reject 标志失败时执行的语句
// 可以换一种写法：var Promise=new Promise（）；// return Promise 返回promise ，一般用下面的那种写法，因为简单没有再声明其他变量
return new Promise(function(resolve,reject){
var img=new Image();
img.src=_src;
img.onload=function(){//加载成功
resolve(img);
};
img.onerror=function(){//加载失败
reject("加载错误");
}
})
}
var list=[];
loadImg("img/3-.jpg").then(function(img){
list.push(img.width);
return loadImg("img/4-.jpg");
}).then(function(img){
list.push(img.width);
return loadImg("img/5-.jpg");
}).then(function(img){
list.push(img.width);
return loadImg("img/6-.jpg");
}).then(function(img){
list.push(img.width);
return loadImg("img/7-.jpg");
}).then(function(img){
list.push(img.width);
return loadImg("img/8-.jpg");
}).then(function(img){
list.push(img.width);
console.log(list);
})
4、all
all 全部调用promise异步,所有异步完成后执行then中的函数
var arr=[];
var list=[];
function loadImg(_src){ //传入地址参数
// resolve 标志成功时执行的语句
// reject 标志失败时执行的语句
// 可以换一种写法：var Promise=new Promise（）；// return Promise 返回promise ，一般用下面的那种写法，因为简单没有再声明其他变量
return new Promise(function(resolve,reject){
var img=new Image();
img.src=_src;
img.onload=function(){//加载成功
resolve(img);
};
img.onerror=function(){//加载失败
reject("加载错误");
}
})
}
for(var i=3;i<9;i++){
arr.push(loadImg("img/"+i+"-.jpg"))
}
Promise.all(arr).then(function(list){
console.log(list,'1');
})
**
5、race的理解
race 所有的异步操作,谁先完成就执行谁
**
6、resolve 直接调用
作用是异步
总结：
是什么
promise
Promise是异步编程的一种解决方案。
特点
1、对象的状态不受外界影响。Promise对象代表一个异步操作，有3中状态：Pending(进行中)、Fulfilled(已成功)、Rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2、一旦状态改变就不会再变，任何时候都可以得到这个结果。Prmise对象的状态改变只有两种可能：从Pending到Fulfilled，从Pending到Rejected。只要这两种情况发生，状态就凝固了，不会再变，而是一直保持这个结果，此时为Reaolved(已定型）
优缺点
优点：
1、将异步操作以同步操作的流程表达出来，避免层层嵌套回调函数
2、接口统一，控制异步操作更加容易
缺点
1、无法取消Promise，一旦创建就会立即执行。
2、如果不设置回调函数，错误无法反应到外部
3、当处于Pending状态时，无法得知进展到哪一个阶段（刚开始还是即将完成）
基本用法
promise 对象是一个构造函数，用来生成promise实例
通过new promise创建一个promise对象，里面有一个参数，参数是一个回调函数，回调函数中有2个参数，resolve，reject。
resolve（）当异步执行成功的时候调用的方法，reject（）当异步失败的时候调用的方法。
除此之外promise有一个then方法，当成功的时候执行第一个回调函数，当失败的时候执行第二个回调函数。第二回调函数也可以通过promise对象.catch调用。
例如：.then（function（res）{ }.function( ){ }） 这是一种写法
.then（function（）{}）.catch（function（）{ }）
Promise构造函数的参数是一个函数，该函数接受两个参数，也均为函数，分别是resolve和reject。resolve的作用是将Promise对象的状态从未完成变为成功，在异步操作成功时调用，并将异步操作的结果作为参数传递出去，而reject则是用于失败的情况。当Promise实例生成后，可以用then方法分别指定Resolve状态和Rejected状态的回调函数。.then对象的第一个函数参数就是处理resolve的情况，第二个函数参数是处理reject的情况
then方法的作用是为Promise实例添加状态改变时的回调函数。返回的仍然是一个Promise对象，但是它是新的对象，不再是原来的那个实例。因此可以采用链式。非常重要的一点：采用链式的then可以指定一组按次序调用的回调函数，后面的then等前面的then（也就是新的Promise对象状态变化后在执行，如果前面的then状态是resolve那么就执行第一个参数函数，否则就执行第二个参数函数）,promise.then()属于异步任务的微任务，当执行到微任务时，他会全部按顺序执行完**
汇总知识点：
promise then（function（）{},function(){}）或者then（function（）{}）.catch（function（）{}）
all的使用
race的使用
resolve的直接调用
