JS魔法堂：IMG元素加载行为详解

快来打我* 2022-02-01 01:25 206阅读 0赞

**一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　**

在《[JS魔法堂：jsDeferred源码剖析][JS_jsDeferred]》中我们了解到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支持程度和行为均有所差异。关于URI的资讯可以参考：[URI Scheme][]、[Uniform resource identifier][]。

**三、实验开始　　　　　　　　　　　　　　　　　　　　　　　　　　**

本次实验将创建 img元素 并对其的 src属性 分别赋予以下内容 fsjohnhuang.png 、 :0 、 空字符串 、 空白字符串 、 //:0 、 javascript:void 0 和 data:image/png,foo ，并订阅img元素的onload和onerror事件，IE5~10下还订阅了onreadystatechange事件，统计整理其在IE5~11、Chrome和FF下的行为特点和事件响应延时。具体实验统计如下：

**测试环境**：

1.测试页面地址为http://localhost:9000/test.html

2. 图片fsjohnhuang.png的大小为12KB

**符号说明：**

N/A 表示该列事件不触发。

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;">src属性值</td> 
 <td style="text-align:center;">备注</td> 
 <td style="text-align:center;" colspan="3">Chrome</td> 
 <td style="text-align:center;" colspan="3">FireFox</td> 
 <td style="text-align:center;" colspan="4">IE5~11</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">onload事件</td> 
 <td style="text-align:center;">onerror事件</td> 
 <td style="text-align:center;">备注</td> 
 <td style="text-align:center;">onload事件</td> 
 <td style="text-align:center;">onerror事件</td> 
 <td style="text-align:center;">备注</td> 
 <td style="text-align:center;">onload事件</td> 
 <td style="text-align:center;">onerror事件</td> 
 <td style="text-align:center;"> IE5~10 on ready state change </td> 
 <td style="text-align:center;">备注</td> 
 </tr> 
 <tr> 
 <td>fsjohnhuang.png</td> 
 <td> 有效URI， URI自动补全为 http://localhost :9000/fsjohnhu ang.png </td> 
 <td style="text-align:center;">首次请求延时为2~5ms</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:left;"> 1.发起资源请求； 2.由于对资源进行缓存，后续对同一资源的请求，延时为0~1ms </td> 
 <td style="text-align:center;">首次请求延时为4~10ms</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:left;"> 1.发起资源请求； 2.由于对资源进行缓存，后续对同一资源的请求，延时为0~1ms </td> 
 <td style="text-align:center;">首次请求延时为3~9ms</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">发生在onload事件之后</td> 
 <td style="text-align:left;"> 1.发起资源请求； 2.由于对资源进行缓存，后续对同一资源的请求，延时为0~1ms </td> 
 </tr> 
 <tr> 
 <td>:0</td> 
 <td> 无效URI， URI自动补全为http://localhost :9000/:0 若IMG元素 在渲染树中， 则会显示加载 失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">延时为5~300+ms</td> 
 <td style="text-align:left;">&nbsp;1.发起资源请求</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">延时为16~60ms</td> 
 <td style="text-align:left;">&nbsp;1.发起资源请求</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">首次请求延时为16ms左右</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:left;"> 1.发起资源请求； 2.由于对资源进行缓存，后续对同一资源的请求，延时为0~1ms </td> 
 </tr> 
 <tr> 
 <td>空字符串，""</td> 
 <td>无效URI</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">延时为0~1ms</td> 
 <td style="text-align:left;"> 1.不发起资源请求； 2. 若IMG元素在渲染树中，不显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">N/A&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.不发起资源请求； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;延时为0~1ms</td> 
 <td style="text-align:center;">N/A&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.不发起资源请求； 2. 若IMG元素在渲染树中，不显示加载失败的示意图。 </td> 
 </tr> 
 <tr> 
 <td>空白字符串，" &nbsp; &nbsp;"</td> 
 <td>无效URI</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">延时为0~1ms&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.不发起资源请求； 2. 若IMG元素在渲染树中，不显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">延时为16~60ms&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.发起资源请求； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">首次延时为14ms左右&nbsp;</td> 
 <td style="text-align:center;">&nbsp;N/A</td> 
 <td style="text-align:left;"> &nbsp; 1.发起资源请求； 2. 若IMG元素在渲染树中，显示加载失败的示意图； 3.&nbsp;由于对资源进行缓存，后续对同一资源的请求，延时为0~1ms </td> 
 </tr> 
 <tr> 
 <td>//:0</td> 
 <td>无效URI，会自动补全为http://:0/</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;延时为0~1ms</td> 
 <td style="text-align:left;"> &nbsp; 1.不发起资源请求； 2. 若IMG元素在渲染树中，不显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;延时为0~1ms&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.不发起资源请求； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;&nbsp;延时为0~1ms</td> 
 <td style="text-align:center;">N/A&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.发起资源请求，但会被浏览器取消掉（No Server Hits）； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 </tr> 
 <tr> 
 <td>javascript:void 0</td> 
 <td>无效的JavaScript URI Scheme</td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;延时为1~2ms</td> 
 <td style="text-align:left;"> &nbsp; 1.发起资源请求，但会被浏览器取消掉（No Server Hits）； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;延时为1~2ms</td> 
 <td style="text-align:left;"> &nbsp; 1.发起资源请求，但会被浏览器取消掉（No Server Hits）； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;N/A</td> 
 <td style="text-align:center;">N/A&nbsp;</td> 
 <td style="text-align:left;"> &nbsp;1.通过JS执行img.src= "javascript:void 0"会报"拒绝访问"的异常。假如通过$.html()或静态html方式设置src为javascript:void 0，则不会报该异常。 </td> 
 </tr> 
 <tr> 
 <td>data:image/png,f</td> 
 <td> 无效的Data URI Scheme </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">延时0~1ms&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.不会发起资源请求； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">延时为1~2ms&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.不会发起资源请求； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 <td style="text-align:center;">N/A</td> 
 <td style="text-align:center;">&nbsp;延时0~1ms</td> 
 <td style="text-align:center;">N/A&nbsp;</td> 
 <td style="text-align:left;"> &nbsp; 1.不会发起资源请求； 2. 若IMG元素在渲染树中，显示加载失败的示意图。 </td> 
 </tr> 
 </tbody> 
</table>

由上述统计数据可知，在Chrome、FF和IE中行为比较同一的是加载无效DataURI Scheme。延时也比较短且稳定。因此jsDeffered采用此方式来为异步执行提速！

**四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　**

这里仅仅对IMG元素加载http、javascript和data的URI Scheme等进行实验，加上实验手段等问题，难免导致统计数据不全面，若有纰漏希望大家指正，谢谢。

尊重原创，转载请注明来自：[http://www.cnblogs.com/fsjohnhuang/p/4148933.html][http_www.cnblogs.com_fsjohnhuang_p_4148933.html] ^\_^肥子John

**五、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　**

http://www.w3help.org/zh-cn/causes/BX9021

http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src

如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！  
![072251001672726.png][]

分类: [JavaScript][]

好文要顶 关注我 收藏该文 ![icon_weibo_24.png][] ![wechat.png][]

[![20141205140116.png][]][20141205140116.png 1]

[^\_^肥仔John][20141205140116.png 1]  
[关注 - 85][- 85]  
[粉丝 - 707][- 707]

\+加关注

[« ][Link 1] 上一篇： [JS魔法堂：函数节流（throttle）与函数去抖（debounce）][Link 1]  
[» ][Link 2] 下一篇： [JS魔法堂：LINK元素深入详解][Link 2]

posted @ 2014-12-07 18:35 [^\_^肥仔John][John] 阅读( 5359) 评论( 0) [编辑][Link 3] [收藏][Link 4]

刷新评论 [刷新页面][Link 4] [返回顶部][Link 5]

注册用户登录后才能发表评论，请 登录 或 注册， [访问][Link 6]网站首页。

[【推荐】超50万VC++源码: 大型工控、组态\\仿真、建模CAD源码2018！][50_VC_ _CAD_2018]  
[【推荐】加入腾讯云自媒体扶持计划，免费领取域名&服务器][Link 7]

[![ketang0108][]][ketang0108 1]

**最新IT新闻**:  
· [十年之后，区块链将重新定义“信任”][Link 8]  
· [今日头条首次公布算法原理 称并非一切交给机器][Link 9]  
· [全球第一款量产「屏下指纹」手机：全面屏时代最完美的解锁方式？][Link 10]  
· [盘点CES上的电视黑科技： 模块化电视、激光电视、柔性屏幕][CES_]  
· [京东宣布成立三大事业群 打造积木型组织拥抱无界零售变革][Link 11]  
» [更多新闻...][...]

[![阿里云C2-1208][C2-1208]][C2-1208_C2-1208]

**最新知识库文章**:

· [步入云计算][Link 12]  
· [以操作系统的角度述说线程与进程][Link 13]  
· [软件测试转型之路][Link 14]  
· [门内门外看招聘][Link 15]  
· [大道至简，职场上做人做事做管理][Link 16]

» [更多知识库文章...][... 1]

### 公告 ###

[肥仔John@github][John_github]

本文转自

[^\_^肥仔John][John]博客园博客，原文链接： [http://www.cnblogs.com/fsjohnhuang/p/4148933.html][http_www.cnblogs.com_fsjohnhuang_p_4148933.html] [/][Link 17]，如需转载请自行联系原作者

[JS_jsDeferred]: http://www.cnblogs.com/fsjohnhuang/p/4141918.html
[URI Scheme]: http://en.wikipedia.org/wiki/URI_scheme
[Uniform resource identifier]: http://en.wikipedia.org/wiki/Uniform_resource_identifier
[http_www.cnblogs.com_fsjohnhuang_p_4148933.html]: http://www.cnblogs.com/fsjohnhuang/p/4148933.html
[072251001672726.png]: /images/20220201/4fe273d197104e299371bd6809f4b94c.png
[JavaScript]: http://www.cnblogs.com/fsjohnhuang/category/456702.html
[icon_weibo_24.png]: http://common.cnblogs.com/images/icon_weibo_24.png
[wechat.png]: /images/20220201/e3d30d1c95494a849cca35e40f681ca8.png
[20141205140116.png]: /images/20220201/8fae44385aa14483aa4431721e18d01f.png
[20141205140116.png 1]: http://home.cnblogs.com/u/fsjohnhuang/
[- 85]: http://home.cnblogs.com/u/fsjohnhuang/followees
[- 707]: http://home.cnblogs.com/u/fsjohnhuang/followers
[Link 1]: http://www.cnblogs.com/fsjohnhuang/p/4147810.html
[Link 2]: http://www.cnblogs.com/fsjohnhuang/p/4149793.html
[John]: http://www.cnblogs.com/fsjohnhuang/
[Link 3]: https://i.cnblogs.com/EditPosts.aspx?postid=4148933
[Link 4]: http://www.cnblogs.com/fsjohnhuang/p/4148933.html#
[Link 5]: http://www.cnblogs.com/fsjohnhuang/p/4148933.html#top
[Link 6]: http://www.cnblogs.com/
[50_VC_ _CAD_2018]: http://www.ucancode.com/index.htm
[Link 7]: https://cloud.tencent.com/developer/support-plan?fromSource=gwzcw.710852.710852.710852
[ketang0108]: /images/20220201/cd8cfc3cf847429b80966113f99b854b.png
[ketang0108 1]: https://ke.qq.com/next/index.html?from=176158
[Link 8]: https://news.cnblogs.com/n/586983/
[Link 9]: https://news.cnblogs.com/n/587039/
[Link 10]: https://news.cnblogs.com/n/586970/
[CES_]: https://news.cnblogs.com/n/586987/
[Link 11]: https://news.cnblogs.com/n/587038/
[...]: http://news.cnblogs.com/
[C2-1208]: https://images2017.cnblogs.com/news/24442/201712/24442-20171208101900738-116140477.jpg
[C2-1208_C2-1208]: /images/20220201/95b9504036ce4f41b7d137ce2a25af11.png
[Link 12]: http://kb.cnblogs.com/page/585502/
[Link 13]: http://kb.cnblogs.com/page/531409/
[Link 14]: http://kb.cnblogs.com/page/141729/
[Link 15]: http://kb.cnblogs.com/page/177402/
[Link 16]: http://kb.cnblogs.com/page/112506/
[... 1]: http://kb.cnblogs.com/
[John_github]: mailto:John@github
[Link 17]: http://www.cnblogs.com/justinw/