使用JavaSctipt判断图片加载完成

问题引入

总结一下上个月在公司的项目中所遇到的一个需求，大致的流程描述是：

1. 用户点击查看物料图片，则根据当前物料 Id 向 server 端发送数据请求；
2. 网络请求所需时间比较长，此时需要增添 loading 动画；
3. 在数据获取完毕，并且图片加载完毕后，关闭 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结构和涉及到的资源都加载完毕后进行调用。