IMG 标签的 onload 和 onerror 事件

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

触发条件

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

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

<img src="/images/button.png" onerror="this.scr='/images/default.jpg';" />

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

执行顺序

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

1. IMG onload
2. document ready
3. window load

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

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

1. document ready
2. IMG onerror
3. window load

src 属性

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

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

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

<img src onerror="do something..." />

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

<img src onerror+="post:/api/do-something?data=..." />

原文地址：http://www.qross.cn/blog/20220426-image

（本文完）