这里先主要讲解下 promise对象用于图片加载异步操作，具体深入 后续还会更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// promise是什么？
// 1、主要用于异步计算
// 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
// 3、可以在对象之间传递和操作promise，帮助我们处理队列
//图片的预加载就属于 异步的回调 promise就是解决回调地狱的
//创建promise 对象，
//promise对象中传递一个回调函数，其中函数有两个参数回调函数，resolve 成功函数，reject 失败函数
new Promise(function(resolve,reject){
var img=new Image();
img.src="./image/icon/8.gif";
//img对象创建加载函数，如果成功了 执行resolve 函数 并且把this 当前的img对象传递进去
//后期then函数需要调用
img.onload=function(){
resolve(this);
}
//此函数表示 img图像加载失败 会调用reject函数 ，并且给reject函数传递一个参数 表示出错了
img.onerror=function(){
reject("图片加载出错了");
}
//promise对象不能直接执行，需要使用then函数来执行
//其中then函数中也包含两个 回调函数，
//第一个成功后 需要调用的函数，其中函数的参数为resolve 成功函数 传入的参数 this
//第二个失败后 需要调用的函数，其中函数的参数为reject 失败函数 出入的参数 “图片加载失败”
}).then(function(data){
console.log(data);
},function(error){
console.log(error);
});
</script>
</body>
</html>
以上的代码风格不好看，看不懂
function loadPromise(src){ return new Promise(function (resolve,reject){ var img=new Image(); img.src=src; img.onload=function(){ resolve(this); } img.onerror=function(){ reject("加载错误-"); } }); } //调用 loadPromise("./image/icon/1.gif").then(function (data){ console.log(data); },function (err){ console.log(err); });
注意：对象手写字母是大写的
还有我们以上的代码好像知识加载了一张图片 那多张呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function loadpromise(src){
return new Promise(function (res,rej){
var img=new Image();
img.onload=function(){
res(this);
}
img.onerror=function (){
rej("加载失败");
}
img.src=src;
});
}
//加载多张图片，使用的是promise的链式编程
//创建一个数组，如果执行成功了，我们会把这个对象存储到数组中
var arr=[]
//调用函数
loadpromise("./image/icon/1.gif").then(function(data){
//添加数组中
arr.push(data);
//在返回一个promise对象
return loadpromise("./image/icon/2.gif").then(function (data){
//在添加数组中
arr.push(data);
console.log(arr[0].src);
},function(err){
console.log(err);
});
},function(err){
console.log(err);
});
</script>
</body>
</html>