图片加载事件

0.384字数 600阅读 258

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

图片加载事件

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

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

原文地址:

推荐阅读更多精彩内容