专栏首页偏前端工程师的驿站JS魔法堂:IMG元素加载行为详解

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 条评论
登录 后参与评论

相关文章

  • JS魔法堂:属性、特性,傻傻分不清楚

    一、前言                                   或许你和我一样都曾经被下面的代码所困扰 var el = document.get...

    ^_^肥仔John
  • Java魔法堂:类加载器入了个门

    一、前言                               《Java魔法堂:类加载机制入了个门》中提及整个类加载流程中只有加载阶段作为码农的我们可以...

    ^_^肥仔John
  • MyBatis魔法堂:各数据库的批量Update操作

    一、前言                                     MyBatis的update元素的用法与insert元素基本相同,因此本篇不打...

    ^_^肥仔John
  • ArcPY系列之九(启用附件)

    如果拍了一堆的照片,通过这种方式放在ArcMap里来查看也将是非常有趣的一件事。 作为ArcPY将要结束的两期推送,我们一起来做一下:将照片做个空间化。

    数据处理与分析
  • [爬虫]头部伪装快速匹配规则

    周小董
  • Factorization Machine

    logistics regression algorithm model中使用的是特征的线性组合,最终得到的分割平面属于线性模型,但是线性模型就只能处理线性问题...

    西红柿炒鸡蛋
  • 5 - SQL Server 2008 之 四则运算、比较运算、逻辑运算及字符连接运算

    四则运算如下: --加减乘除(+、-、*、\、%)取余运算 SELECT --加法运算 3+5 AS 加法结果1, 3.5+6 AS 加法结果2,...

    CNXY
  • Factorization MachineFactorization Machine---因子分解机

    logistics regression algorithm model中使用的是特征的线性组合,最终得到的分割平面属于线性模型,但是线性模型就只能处理线性问题...

    西红柿炒鸡蛋
  • 【论文笔记系列】AutoML:A Survey of State-of-the-art (下)

    上一篇文章介绍了Data preparation,Feature Engineering,Model Selection,这篇文章会继续介绍后面的内容。

    marsggbo
  • 二、机器学习面试之有必要手推SVM吗?

    上篇文章中,我们介绍了SVM的基本思想,并将其推导成了一个数学问题,今天的任务,就是解决如何求解这个数学问题,同时,回答上篇文章中提出的第二个问题: 如果将正负...

    用户1332428

扫码关注云+社区

领取腾讯云代金券