图片加载事件

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

图片加载事件

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

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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 17,359评论 1 40
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 6,554评论 1 21
  • 百战程序员_ Java1573题 QQ群:561832648489034603 掌握80%年薪20万掌握50%年薪...
    Albert陈凯阅读 12,668评论 2 32
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 8,631评论 2 46
  • 上周的今天,也就是2015年5月9号,我光荣地大学毕业了,5月11号便搬来了心心念念的洛杉矶开始了这一年的OPT。...
    RoseSniffer8阅读 59评论 0 1