最近有一个在页面中的图片加载完成后执行某些操作的需求，那么应该如何判断页面中的图片是否加载完成呢？

图片加载事件

图片的加载分为两种情况：

  • 动态加载（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元素只会运行一次，不会陷入死循环。