最近有一个在页面中的图片加载完成后执行某些操作的需求，那么应该如何判断页面中的图片是否加载完成呢？
图片加载事件
图片的加载分为两种情况：
动态加载（JS生成）
非动态加载（html生成）
非动态加载
对于非动态加载的图片，直接使用window.onload，在网页中所有内容加载完毕后执行操作即可。
在jquery中还有一个$(document).ready() 方法，简要介绍一下二者的区别。
| 事件属性 | window.onload | $(document).ready() |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片） | 网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完 |
| 编写个数 | 不能同时编写多个，后面绑定的事件会覆盖前面的 | 能同时编写多个 |
| 简化写法 | 无 | $(function() { //... }) |
| 其他 | 原生方法，jquery中可写作$(window).load | jquery方法 |
注：IE8及以下不支持onload事件，但支持onreadystatechange事件，有兼容性需要的可以使用该方法，这里就不展开了。
动态加载
对于动态加载的图片，可以使用img标签的onload事件，原生实现如下：
var img = new Image()
img.onload = function() {
//...
}
img.src = 'xxx.jpg'
这里注意图片的src要写在onload事件之后，如果先赋值src，浏览器会去异步加载src中的值，这个异步过程可能在onload之前就完成了，例如图片缓存、js阻塞、图片很小等等原因，那么onload事件将不会执行。将src写在onload之后，可以保证异步过程在onload赋值完成后才开始进行，保证能够正确监听到onload事件。
jquery实现:
$('<img/>').on('load', function() {
$(this).remove();
//...
}).attr('src', 'xxx.jpg');
在onload事件中使用$(this)来对生成的img进行操作。
ES6实现：
new Promise((resolve, reject) => {
let img = new Image()
img.onload = function(){
resolve(img)
}
img.src = 'xxx.jpg'
}).then((img) => {
//...
})
多张图片ES6实现：
let images = [
'xxx1.jpg',
'xxx2.jpg',
'xxx3.jpg'
];
let promises = [],
img = [],
imgCount = images.length;
for(let i = 0 ; i < imgCount ; i++){
promises[i] = new Promise((resolve, reject)=>{
img[i] = new Image()
img[i].onload = function(){
resolve(img[i])
}
img[i].src = images[i]
})
}
Promise.all(promises).then((img)=>{
//...
})
利用Promise.all在所有图片都加载完成时执行相应操作。
链接失效
一个站点可能会有很多图片，假如某个图片链接失效了，那么上面代码中的Promise.all也就无法成功执行，如何避免这种情况呢？
可以利用onerror事件来设置链接失效时执行的操作，例如隐藏图片或者重新设置一个图片：
$('img').on('error', function() {
//设置提示错误的图片
$(this).attr('src', 'error.jpg')
})
假如这个新设置的图片链接也失效了，那么浏览器将会对同一个错误链接一直发送请求，陷入死循环，可以改用one来绑定error事件，这样error事件对于该img元素只会运行一次，不会陷入死循环。
