前面已经更新了很多关于ES6的知识点，今天我们来综合的做一个小练习，让多张图片可以同时加载。
图片没有加载之前的状态是这样
HTML结构如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同时加载多张图片</title>
</head>
<body>
<div id='all'>
<img src="./images/load.gif" alt="" id="a1">
<img src="./images/load.gif" alt="" id="a2">
<img src="./images/load.gif" alt="" id="a3">
<img src="./images/load.gif" alt="" id="a4">
</div>
<script src='jQ.js'></script>
</body>
</html>
给出的data数据如下
{
"main": [{
"id": "a1",
"url": "http://localhost:8088/images/a.jpg"
},
{
"id": "a2",
"url": "http://localhost:8088/images/b.jpg"
},
{
"id": "a3",
"url": "http://localhost:8088/images/c.jpg"
},
{
"id": "a4",
"url": "http://localhost:8088/images/d.jpg"
}
]
}
DOM结构中已经给出了加载中的路径 img标签页已经存在了，我们需要做的是，在img的src属性加载完成之后把src属性替换一下就OK了。
首先，我们需要利用ajax把数据先请求过来,，还记得应该怎么写吗？
用jquery写ajax只需要传递一个对象就可以了，而且很多参数都可以省略，我就直接用默认的get方式请求了，请求路径是我自己在后台定义的路由，你们可以自己定义，当ajax请求成功的时候打印一下data数据的值，看一下是否可以打印到。
$.ajax({
url: '/data',
success: (data) => {
var arr = JSON.parse(data).main;
console.log(arr);
}
});
请求到的数据没有错，接下来我们开始思考，这个同时加载的功能到底利用什么可以实现呢？
好像还想不起来，先不要着急，还记得如何判断一张图片是否加载完成吗？
先new一个image，然后给image一个src属性，image有一个onload的方法，是图片加载完成之后触发，当图片加载完成之后，把页面上的src属性覆盖掉就可以了。
for(let i =0 ;i<arr.length;i++){
let img = new Image();
img.src = arr[i].url;
img.onload = () => {
img.src = $('#all img').eq(i)[0].src;
}
}
看上去上面的代码好像是完成了要求，所有的图片都加载出来了，可是是同步加载的，如何实现异步加载呢？
还记得前两天学习的小P么？可以实现异步加载的ES6新增对象Promise,我们来复习一下基本的语法
new Promise((reslove, reject) => {
if(){//如果条件满足，就调用reslove函数
reslove();
}
}).then(reslove=>{//成功状态下执行的代码
})
.catch(reject=>{报错或者失败状态下执行的代码
});
我们尝试一下利用Promise来改写上面的图片加载代码
先创建一个promise实例，代码的主体部分应该一样，先new一个image，然后给图片一个src属性
new Promise((reslove, reject) => {
let img = new Image();
img.src = url;
}).then(reslove=>{}).catch(reject=>{});
小p里面有个特别重要的判断条件，决定了小p以后的人生，可是这个判断条件该如何写呢？满足什么情况下才会成功呢？
当图片加载完成之后，就是这个条件，可这个条件该如何写呢？当图片加载完成之后改变小p的状态不就好了，代码如下：
new Promise((reslove, reject) => {
let img = new Image();
img.src = url;
img.οnlοad=()=>{
reslove();
}
}).then(reslove=>{}).catch(reject=>{});
当图片加载完成之后，调用小p成功状态下的回调函数，回调函数里面该写什么呢？
当图片加载完成之后，肯定是要替换页面中的路径，把图片呈现在用户的面前了,所以回调函数里面的代码应该是
$('#all img').eq(1).src=url;
url是我们需要用的参数，通过调用的时候把参数传递过来
new Promise((reslove, reject) => {
let img = new Image();
img.src = url;
img.οnlοad=()=>{
reslove(url);
}
}).then(url=>{
$('#all img').eq(1)[0].src=url;
}).catch(reject=>{});
eq后面的参数我们不能写成死的，可是写很多遍又太麻烦，所以我们现在需要一个循环，把url地址和I下标传给小p
for(let i=0;i<arr.length;i++){
new Promise((reslove, reject) => {
let img = new Image();
img.src = arr[i].url;
img.οnlοad=()=>{
reslove(arr[i].url);
}
}).then(url=>{
$('#all img').eq(i)[0].src=url;
}).catch(reject=>{});
}
这次的代码看上去没什么问题了,我们来运行一下试试：
图片都加载出来了，这样就算结束了吗？
再仔细想想，有没有更好的办法，我们之前学过的一个方法，可以控制一个集合的promise实例。
Promise.all();
周六只是简单的跟大家提了一下，今天来介绍一下这个方法的主要功能，当他的状态变为成功的时候，会触发reslove的回调函数，回调函数里面的参数就是所有集合里面的小小p的成功函数参数的集合，也是一个数组，理解起来有一点点抽象对不对？我们画一张图来看看
上面的图片有一点点抽象，大家原谅一下我们这个灵魂画手。
我们换成代码表示就是
var arr=[1,2,3,4];
var pAll=[];
for (let i=0;i<arr.length;i++){
let p= new Promise((reslove,reject)=>{
reslove(arr[i]);
});
pAll.push(p);
};
Promise.all(pAll).then(reslove=>{
console.log(reslove);
console.log(arr);
});
arr数组里面每一项的值分别是每个小promise的参数，Promise.all成功函数的返回值刚好就是arr里面的每一项，符合了上面的一一对应。
我们尝试用这个方法来改写一下上面的代码，
那么这次就需要先let一个空数组，把每一个图片的promise先放在里面了；
let all=[];
我们先来封装一个函数来创建promise实例
function addPromise(url) {
return new Promise((reslove, reject) => {
let img = new Image();
img.src = url;
img.onload = () => {
reslove(url);
}
})
};
之后利用刚刚所学的Promise.all来进行改写上面的代码
for (let i = 0; i < arr.length; i++) {
arr.push(addPromise(arr[i].url));
};
Promise.all(arr).then(reslove => {
for (let i = 0; i < reslove.length; i++) {
$('#all img').eq(i)[0].src = reslove[i];
}
到这里为止，我们今天的任务就完成了，看一下整体的代码
$.ajax({
url: '/data',
success: (data) => {
var arr = JSON.parse(data).main;
function addPromise(url) {
return new Promise((reslove, reject) => {
let img = new Image();
img.src = url;
img.onload = () => {
reslove(url);
}
})
};
for (let i = 0; i < arr.length; i++) {
arr.push(addPromise(arr[i].url));
};
Promise.all(arr).then(reslove => {
for (let i = 0; i < reslove.length; i++) {
$('#all img').eq(i)[0].src = reslove[i];
}
});
}
});
先利用ajax进行参数的请求，之后用函数封装一个构造Promise的方法，promise里面判断图片是否加载完成，最后循环调用函数，利用Promise.all方法整体操作替换src路径。
今天算是又重新整理一遍了，希望我写的明白一点了，点击原文链接即可获得《css世界》电子版，也算是大家的一点小福利吧。
