本文共 1854 字，大约阅读时间需要 6 分钟。
在《》中我们了解到img元素加载失败可以作为函数异步执行的优化方案。本文打算对img元素的加载行为进行更深入的探讨。
资源加载首先当然是确定资源位置的src属性、随之就是资源加载成功与否的onload事件和onerror事件，对IE5~10来说还多了一个onreadystatechage事件和与该事件相关联的readyState属性和complete属性。
onload事件，当资源加载完成并成功解析后触发（若加载的不是image/*类型的资源，则解析失败）。
onerror事件，当找不到资源或解析失败后触发。
onreadystatechange事件，在onload事件后触发。
readyState属性，用于表示IMG元素当前的资源装载状态，默认值为"uninitialized"，onload事件触发后变为"complete"（onload事件处理函数运行时，readyState依然为"uninitialized"）。
complete属性，用于表示IMG元素的资源是否成功解析。默认为false，onload事件触发后变为true（onload事件处理函数运行时，readyState依然为false）。
src属性，用于指定资源位置URI。常见的URI格式为http://、https://、javascript:...和data:image/*。而不同的浏览器对不同的URI支持程度和行为均有所差异。
本次实验将创建img元素并对其src属性分别赋予以下内容：fsjohnhuang.png、:0、空字符串、空白字符串、//:0、javascript:void 0和data:image/png,f，并订阅img元素的onload和onerror事件，IE5~10下还订阅了onreadystatechange事件，统计整理其在IE5~11、Chrome和FF下的行为特点和事件响应延时。
测试环境：
测试页面地址为http://localhost:9000/test.html
图片fsjohnhuang.png的大小为12KB
以下表格展示了不同src属性值下，Chrome、Firefox、IE5~11在onload事件、onerror事件及IE5~10下的onreadystatechange事件、readyState和complete属性的响应延时及备注。
| src属性值 | 备注 | Chrome | Firefox | IE5~11 |
|---|---|---|---|---|
| fsjohnhuang.png | 有效URI，URI自动补全为http://localhost:9000/fsjohnhuang.png | onload事件首次请求延时为2~5ms | onload事件N/A | onload事件首次请求延时为3~9ms |
| :0 | 无效URI，URI自动补全为http://localhost:9000/:0 | onerror事件延时为5~300+ms | onerror事件延时为16~60ms | onerror事件首次请求延时为16ms左右 |
| 空字符串 | 无效URI | onload事件延时为0~1ms | onload事件N/A | onload事件延时为0~1ms |
| 空白字符串 | 无效URI | onload事件延时为0~1ms | onload事件N/A | onload事件延时为0~1ms |
| //:0 | 无效URI，会自动补全为http://:0/ | onload事件延时为0~1ms | onload事件N/A | onload事件N/A |
| javascript:void 0 | 无效的JavaScript URI Scheme | onload事件延时为1~2ms | onload事件N/A | onload事件N/A |
| data:image/png,f | 无效的Data URI Scheme | onload事件延时0~1ms | onload事件N/A | onload事件N/A |
本文仅对IMG元素加载http、javascript和data的URI Scheme等进行实验，由于实验手段等问题，导致统计数据不全面。如有纰漏，欢迎指正。
http://www.w3help.org/zh-cn/causes/BX9021
http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src
转载地址：http://pssuz.baihongyu.com/