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

一、前言                            

  在《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 SchemeUniform 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 表示该列事件不触发。

image.png

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

四、总结                            

 这里仅仅对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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏happyJared

IDEA快捷键拆解系列(四):View篇

  以下是关于View导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

1101
来自专栏前端儿

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度

1361
来自专栏DeveWork

解决七牛云存储缓存加速Gravatar 头像图片路径url 参数失效的问题

前天分享了《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》,不过这昨天发现通过七牛云存储缓存加速Gravatar 头像,会导致头像图片所在的路径 ...

2177
来自专栏Young Dreamer

基于Webkit的浏览器关键渲染路径介绍

关键渲染路径概念 浏览器是如何将HTML、JS、CSS、image等资源渲染成可视化的页面的呢?本文简单介绍一下渲染过程中涉及到的关键步骤。 该过程分为四步:模...

2149
来自专栏用户2442861的专栏

我的VS2010+VAssistX

最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为我是个快捷键控吧,不管怎样,用或不用,方便或不方便,它就是那里,一动也不动,进入...

1551
来自专栏编程

AngularJS中使用表单输入的应用设计

在Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的,你可以使用ng-model属性把元素绑定到你的模型属性上。这一机制对于所有标准的表单元素...

1776
来自专栏韩东吉的Unity杂货铺

零基础入门 35:自定义窗口

Hello,各位小伙伴,最近公司的事务繁多,所以稍微搁置了一下更新的速度,导致很多同学都以为我被恐怖分子绑架了

1452
来自专栏Material Design组件

Human Interface Guidelines — Text Fields

1605
来自专栏IMWeb前端团队

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统的WEB开发中,当与用户或服务器发生交互时,需要我们手动获取数...

2457
来自专栏大前端开发

使用mpvue开发小程序教程(五)

在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,...

2112

扫码关注云+社区

领取腾讯云代金券