JS魔法堂：IMG元素加载行为详解-白红宇

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

阅读量：421 次

发布时间：2019-03-06

本文共 3156 字，大约阅读时间需要 10 分钟。

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

在《》中我们了解到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的资讯可以参考：、。

三、实验开始　　　　　　　　　　　　　　　　　　　　　　　　　　

本次实验将创建 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 表示该列事件不触发。

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

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

四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

尊重原创，转载请注明来自： ^_^肥子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

你可能感兴趣的文章