问题引入
总结一下上个月在公司的项目中所遇到的一个需求，大致的流程描述是：
- 用户点击查看物料图片，则根据当前物料 Id 向 server 端发送数据请求；
- 网络请求所需时间比较长，此时需要增添 loading 动画；
- 在数据获取完毕，并且图片加载完毕后，关闭 loading 动画；
已上就是简单的过程描述，在异步请求到图片数据后（图片数量10来张左右），需要动态插入到文档页面后，取消 loading 状态，此时就需要判断图片是否加载完成。
解决办法
onload 事件是指dom的生成和资源完全加载（比如flash、图片）出来后才执行，这里注意一下 onload 和 jQuery 中 ready 的区别：
ready 只是 dom 结构加载完毕，便视为加载完成，此时图片没有加载完毕；
onload 是指 dom 结构加载完毕并且资源也完全加载（例如图片、视频等资源）完毕后才执行；
单张图片
const image = new Image();
image.src = 'http://img2.3lian.com/2014cf/f4/54/d/146.jpg';
image.onload = () => {
console.log('图片加载完毕');
document.body.appendChild(image);
}
console.log('here');
结果如下：
result.png
利用ES6 中的 Promise 对象
new Promise((resolve, reject) => {
const image = new Image();
image.src = 'http://img2.3lian.com/2014cf/f4/54/d/146.jpg';
image.onload = () => {
console.log('图片加载完成');
resolve(image);
};
}).then(image => {
console.log('图片加载完毕后执行的动作');
});
// console口的输出：
// 图片加载完成
// 图片加载完毕后执行的动作
多张图片
const images = [
'http://img2.3lian.com/2014cf/f4/54/d/147.jpg',
'http://img2.3lian.com/2014cf/f4/54/d/148.jpg',
'http://img2.3lian.com/2014cf/f4/54/d/149.jpg',
'http://img2.3lian.com/2014cf/f4/54/d/146.jpg'
];
const imgs = [];
let flag = 0;
images.map((item, index) => {
imgs[index] = new Image();
imgs[index].src = item;
imgs[index].onload = () => {
console.log('第 ' + index + ' 张图片加载完毕');
console.log(imgs[index]);
flag++;
if (flag === images.length) {
console.log('所有图片加载完毕');
}
}
});
让我们来看一下控制台的输出：
image.png
在刷新一遍，看看结果：
image.png
很明显，我们看出来了，多张图片加载完毕的时间是不确定的，这个是因为每次请求时和网络状态、图片的大小等因素相关，所以这种方式我们只能判断多张图片是否全部加载完毕，那我们先来看看这种方式的ES 6是如何实现的？
利用 ES6 Promise.all()
const images = [
'http://img2.3lian.com/2014cf/f4/54/d/147.jpg',
'http://img2.3lian.com/2014cf/f4/54/d/148.jpg',
'http://img2.3lian.com/2014cf/f4/54/d/149.jpg',
'http://img2.3lian.com/2014cf/f4/54/d/146.jpg'
];
const promiseAll = [];
const imgs = [];
images.map((item, index) => {
promiseAll[index] = new Promise((resolve, reject) => {
imgs[index] = new Image();
imgs[index].src = item;
imgs[index].onload = () => {
console.log('第 ' + index + ' 张图片加载完毕');
resolve(imgs[index]);
};
});
});
Promise.all(promiseAll).then(() => {
console.log('所有图片加载完毕');
});
已上通过分别使用ES5 和 ES6 两种语法实现了判断图片是否加载完毕的功能，主要利用了onload这个方法，它会在dom结构和涉及到的资源都加载完毕后进行调用。
