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 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 表示该列事件不触发。
由上述统计数据可知,在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
- 学习笔记CB002:词干提取、词性标注、中文切词、文档分类
- 深入浅出 Retrofit,这么牛逼的框架你们还不来看看?
- 用Python从零开始构建反向传播算法
- 备战CDA数据分析竞赛!Kaggle赛题大揭秘
- 如何用Python将时间序列转换为监督学习问题
- Spring MVC的配置和使用
- Java可以如何实现文件变动的监听
- 借助GitHub搭建属于自己的maven仓库
- 如何使用 scikit-learn 为机器学习准备文本数据
- Hyperledger Fabric Chaincode 开发
- 使用VS Code开发asp.net core
- 以太坊·将自定义数据写入到区块链中
- 使用TensorFlow实现股票价格预测深度学习模型
- 06-移动端开发教程-fullpage框架
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode刷题总结 -- 数组篇
- 剑指offer(07-09)题解
- 学以致用C++设计模式 之 “适配器模式”
- FTP文件管理项目(本地云)项目日报(九)
- 【Linux】血泪教训 -- 动态链接库配置方法
- FTP文件管理项目(本地云)项目日报(八)
- FTP文件管理项目(本地云)项目日报(七)
- FTP文件管理项目(本地云)项目日报(六)
- Transformers Assemble(PART I)
- FTP文件管理项目(本地云)项目日报(五)
- 几个Python“小伎俩”
- FTP文件管理项目(本地云)项目日报(四)
- BERT源码分析(PART I)
- FTP文件管理项目(本地云)项目日报(二)
- FTP文件管理项目(本地云)项目日报(一)