IMG 标签的 onload 和 onerror 事件

您所在的位置:网站首页 img标签onerror IMG 标签的 onload 和 onerror 事件

IMG 标签的 onload 和 onerror 事件

2023-03-28 10:41| 来源: 网络整理| 查看: 265

IMG 标签的 onload 和 onerror 事件

IMG 标签一般用来加载图片,在某些情况下,还会用来做些特别的事,如记录页面访问量,老吴在很多年前见过这种玩法。除了 document 和 window 对象之外,IMG 标签是少有的几个支持 onload和onerror事件的标签之一,其他还有 SCRIPT、LINK、FRAME、IFRAME 标签等,即只要有外部文件引用的标签。还有一个事件onabort,这里不讨论。

触发条件

在 IMG 标签中,当给定的图片 URL 地址存在且图片加载完成,则触发onload事件。当给定的图片 URL 地址不存在或网络出错时,则触发onerror事件。

可以在图片不存在或网络出错时,在onerror事件中指定一个替换图片,防止出现红叉叉,好像现在的浏览器已经不是红叉叉了。

替换图片必须存在,否则会再次触发onerror事件,然后再次触发onerror事件.... 最后的结果就是堆栈溢出。

执行顺序

IMG 标签的onload事件和 document 的ready状态(DOMContentLoaded)及 window 的onload事件执行顺序经测试之后依次是:

IMG onload document ready window load

不难理解,因为 IMG 标签是 document 的一部分,所以在ready之前触发,不过应该也与图片大小有关,当图片加载比较慢时,应该在ready之后触发。

IMG 标签的onerror事件与onload事件的执行时机不同,当出错时,始终在ready之后触发。

document ready IMG onerror window load src 属性

src属性用于指定图片的 URL 地址,与事件相关的逻辑总结如下:

当src地址正确时且图片加载完成触发onload事件; 当src地址不正确时,触发onerror事件,并且控制台会有报错信息。 当不设置src属性时,即不触发onload事件,也不触发onerror事件,控制台也没有报错信息。 划重点,当src地址为空时,只触发onerror事件,但是控制台没有报错信息。 当不设置src属性时,既不会触发onload事件,也不会触发onerror事件。

所以,想要让 IMG 标签干一些特殊的事,可以设置src属性但是值为空,然后用onerror事件做些什么,控制台也不会报错。

root.js 库的 IMG 标签扩展就使用这个原理为onerror添加了服务器端事件。

(本文完)



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3