IMG 标签的 onload 和 onerror 事件 |
您所在的位置:网站首页 › img标签onerror › IMG 标签的 onload 和 onerror 事件 |
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 |