<IMG>标签的方方面面

<img>标签是页面上最为重要的元素之一。很难想象一个页面上没有图片的样子,这样的页面效果将会大打折扣。


任何一个前端工程师想必对<img>标签都非常熟悉了,毕竟经常和它打交道嘛。但你真的对它完全了解吗?如果你能准确无误地回答出以下几个关于<img>的问题,那么恭喜你,本文你可以不再往下看了,或者说你可以用省视的目光来核对本文。

  • 问题1:如果在一个页面上插入<img>标签,有哪些属性是必需的?

  • 问题2:<img>标签在HTML和XHTML中有什么区别?

  • 问题3:在一个页面上插入<img>标签,为什么说最好要使用height和width属性?

  • 问题4:<img>标签的onload/onerror/onabort事件,在什么情况下会被触发?

  • 问题5:我们一般知道,当一个图片请求返回404时,会触发onerror事件,那当图片请求返回302时,会触发onerror事件吗?304呢?403呢?500呢?请求超时呢?甚至说当返回200,但内容并非是图片时,也会触发onerror么?

  • 问题6:图片触发onerror事件时,能使用javascript获取到图片请求的响应代码么?

  • 问题7:我们一般知道,<img>标签可以用来发起跨域请求,你能手写出一段正确使用<img>发起跨域请求的javascript代码么?

  • 问题8:用户是可以设置浏览器不显示图片的,尤其是在移动设备上,用户为了节省流量,往往会进行那么,如何获知用户是否禁止浏览图片呢?


问题已经提出,你能回答出哪几个呢?事实上,在没有查看标准和亲自做试验之前,笔者对其中一些问题的答案也是模棱两可,不敢确保自己的答案100%准确。

下面,我们逐一分析和解答上述的8个问题:

问题1:如果在一个页面上插入<img>标签,有哪些属性是必需的?

答案是src和alt。

实例:(本实例摘自W3school: http://www.w3school.com.cn )

<img src=" http://www.w3school.com.cn/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

src属性规定了显示图像的URL,浏览器会对该URL发起Http Get请求。

alt属性则规定了图像的替代文本,在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。如下图:

与src属性相比较,alt属性更容易被设计人员和开发人员所忽视,事实上,在笔者撰写本文时,即使在国内一些大型门户网站首页上(例如新浪、搜狐),我们也可以找到许多没有alt属性的<img>标签。但笔者强烈推荐在文档的每个图像中都使用这个属性,这样即使图像无法显示,用户还是可以看到的一些相关信息,从而大大提高了页面的用户友好性。

问题2:<img>标签在HTML和XHTML中有什么区别?

(答案摘自W3school: http://www.w3school.com.cn

在 HTML 中,<img> 标签没有结束标签。例如:

<img src=" http://www.w3school.com.cn/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" >

在 XHTML 中,<img> 标签必须被正确地关闭。

<img src=" http://www.w3school.com.cn/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

在 HTML 4.01 中,不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。在 XHTML 1.0 Strict DTD 中,不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

问题3:在一个页面上插入<img>标签,为什么说最好要使用height和width属性?

您在浏览网页的时候,可能会遇到这种情况:随着页面中的图像加载并成功显示,页面上的内容会随之发生不规律的移动,影响您的阅读。这种情况就是因为页面上的图像没有定义height和width属性而导致的。

如果没有定义图片的height和width属性,那么浏览器为了能够显示每一个加载的图像,它需要先下载图像,然后解析出图像的高度和宽度,并在显示窗口留出相应的屏幕空间,这样就会导致浏览器不断地重新计算/调整页面的布局,这可能会延迟文档的显示,并导致页面重绘。

因此,笔者建议使用<img>的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了空间,从而可以加速文档的显示,还可以避免文档内容的移动而引起页面重绘。

但是,需要注意的是:不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。当然,这个准则在实际应用中也有例外,例如笔者就认为,小比例的图像缩放应该是允许的,此外,如果页面上需要加载同一张图像的不同尺寸的显示,因为浏览器对同一个图像只会请求一次,因此此时就建议使用height 和 width 属性来缩放图像。

问题4:<img>标签的onload/onerror/onabort事件,在什么情况下会被触发?

onload: 事件会在图像加载完成后立即发生。

onerror: 事件会在文档或图像加载过程中发生错误时被触发。

onabort: 事件会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮,或者在图像下载的过程中。

上面的三句话虽然看起来很简单,但实际上有许多细节需要进一步的研究,尤其是onload和onerror事件。这些细节的问题,将在问题5中提出。

问题5:我们一般知道,当一个图片请求返回404时,会触发onerror事件,那当图片请求返回302时,会触发onerror事件吗?304呢?403呢?500呢?请求超时呢?甚至说当返回200,但内容并非是图片时,也会触发onerror么?

这些问题需要动手做个试验。试验的结果如下表所示:

图片请求

触发的事件类型

IE

FireFox

Chrome

返回404

onerror

返回302,并且跳转地址为一个正常的图片

onload

所触发的事件类型与原始的请求无关,而是与跳转地址相关。

返回304,并且缓存生效

onload

但也要注意,如果缓存不存在,仅仅是单纯地返回304,依然会触发onerror

返回403

onerror

返回500

onerror

请求超时

onerror

返回504

返回200,但返回的内容并非图片

onerror

问题6:图片触发onerror事件时,能使用javascript获取到图片请求的响应代码么?

很遗憾,目前浏览器厂商尚未提供相关的接口。

问题7:我们一般知道,<img>标签可以用来发起跨域请求,你能手写出一段正确使用<img>发起跨域请求的javascript函数么?

这个问题看起来很简单,或许你很快的就写出了以下代码:

 1 function setImageSrc() {
2 var i = new Image();
3 i.src = "http://.../1.gif";
4 i.onload = function() {
5 // do sth.
6 };
7
8 i.onerror = function() {
9 // do sth.
10 }
11
12 i.onabort = function() {
13 // do sth.
14 }
15 }

代码中新建了一个image对象,并绑定了onload, onerror, onabort三个事件处理函数。

但实际上,上述代码存在几个问题,你能看出几个呢?

1)       属性src赋值操作应该在事件绑定之后:否则,有可能出现图片已经加载完毕、但事件绑定尚未完成的情况。例如,在上述代码片段中,如果在第三行和第四行之间增加一句alert(1),就能重现这种情况。

2)       在IE6中,上述事件绑定代码会形成一个循环引用——Image对象的onload属性引用了一个匿名函数对象,而匿名函数通过其作用域链引用会Image对象,这种循环引用会在IE6中导致内存泄露。因此,在onload的匿名函数中,应该解除循环引用,正确的代码类似于:

1 i.onload = function() {
2 // do sth.
3
4 i.onload = null;
5 i = null;
6 }

3)       在IE6中,如果图片是多帧的gif,会触发多次的onload事件。因此,为避免这种情况,也需要在onload事件处理函数中解除事件函数:

1 i.onload = function() {
2 // do sth.
3
4 i.onload = null;
5 i = null;
6 }

问题8:用户是可以设置浏览器不显示图片的,尤其是在移动设备上,用户为了节省流量,往往会禁止图片显示。那么,如何获知用户是否禁止浏览图片呢?

注:该问题的解决方案来源于 http://stackoverflow.com/questions/8379156/how-to-detect-if-images-are-disabled-in-browser,笔者对其中的原理和代码bug做了相应的解读和修复。

在Firefox和Chrome中,可以使用Image对象的complete属性来解决此问题:设置Image对象的src属性,以请求一个不存在的图片,当浏览器禁止显示图片时,Image对象的complete属性为true,否则为false。

在Opera中,也可以使用Image对象的complete属性,但它与Firefox和Chrome的不同,设置Image的src后,在onload之前,它一直显示为false。但我们可以将图片的src设置为一个特殊的值:img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";  这样,当Opera禁止显示图片时,Image的complete属性为false,否则为true。

而在IE中,Image的complete属性会一直为false。因此,但我们注意到,当IE禁止显示图片时,是不会触发Image对象的onload/onerror/onabort事件的。针对该特性,我们使用setTimeout函数,当在一定的时间内没有检测onload/onerror/onabort事件的发生,则认为浏览器禁止显示图片。

具体的代码如下:

 1 <script type="text/javascript">
2 detectImageEnabledMode({
3 onDetectImageIsDisabled:function(){
4 alert('disabled');
5 },
6 onDetectImageIsEnabled:function(){
7 alert('enabled');
8 }
9 });
10
11 // 用来检测浏览器是否禁止显示图片
12 // 参数options: onDetectImageIsDisabled,检测到禁止显示图片后的回调函数;onDetectImageIsEnabled, 检测到显示图片后的回调函数
13 function detectImageEnabledMode(options){
14 /* define disabled/enabled actions */
15 var actionCounter = 0;
16 var enabledAction = options.onDetectImageIsEnabled || function() {};
17 var enaledActionRun = function(){
18 if(actionCounter)
19 return;
20 actionCounter++;
21 enabledAction();
22 }
23
24 var disabledAction = options.onDetectImageIsDisabled || function(){};
25 var disabledActionRun = function(){
26 if(actionCounter) return;
27 actionCounter++;
28 disabledAction();
29 }
30
31 /* create image */
32 var img = new Image();
33 var currentTime = (+new Date);
34 if(navigator.appName.indexOf('Microsoft Internet Explorer') != -1){// ie
35 img.onload = i.onerror = i.onabort = enaledActionRun;
36
37 // 试图访问一个不存在的图片
38 img.src = currentTime+'.'+currentTime+'?time='+currentTime;
39 // 如果500毫秒后,尚未触发图片的onload/onerror/onabort事件,则认为浏览器禁止了图片显示
40 setTimeout(function(){
41 disabledActionRun();
42 }, 500);
43 }else if (navigator.appName.indexOf('Opera') != -1) {// opera
44 img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="+'?time='+currentTime;
45
46 // 禁止图片显示时,img.complete==false
47 if(img.complete){
48 enaledActionRun();
49 }else{
50 disabledActionRun();
51 }
52 }else{// firefox chrome safari
53 // 试图访问一个不存在的图片
54 img.src = currentTime+'.'+currentTime+'?time='+currentTime;
55
56 // 禁止图片显示时,img.complete==true
57 if(img.complete){
58 disabledActionRun();
59 }else{
60 enaledActionRun();
61 }
62 }
63 }
64 </script>

至此,相信你已经对Image有了更进一步的了解了。事实上,还有与Image相关的许多技巧在本文没有提及,例如Image的lazyload。大家在实际编程中可以慢慢接触和了解。在以后的文章中,我也会根据实际情况持续地写一些与Image相关的文章。

img标签的方方面面的更多相关文章

  1. Tag标签系统设计

    转一篇关于tag的文章:  <Tagging: People-powered Metadata for the Social Web>出版于2008年,中文版译为<标签:标记系统设计 ...

  2. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  3. IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  4. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  5. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  6. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  7. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  8. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

随机推荐

  1. 在IIS上Office Word下载失败,检索 COM 类工厂中 CLSID 为000209FF的组件失败,80070005 拒绝访问。

    最近在做一个网站时,有一个下载word文档功能,在本地直接调试是可以下载的,但部署到IIS上就出现问题了. 出现问题如下:Error:下载简历方法出错:检索 COM 类工厂中 CLSID 为 {000 ...

  2. js 去掉空格

    写成类的方法格式如下:(str.trim();)<script language="javascript"> String.prototype.trim=functio ...

  3. 用 alias 给常用命令取个别名

    作为一名iOS开发者,很多时候需要用到命令行,有时候一长串的命令实在让人讨厌,特别是一些常用的命令,我们要一遍一遍不厌其烦的去敲键盘.但是老鸟一般都不会这么傻,因为有 alias,通过alias 我们 ...

  4. MySql小知识点

    1.查看MySql是什么编码 show create table tablename;

  5. PLSQL实例(游标)

    在PLSQL块中执行SQL语句 A.   数据定义DDL: create,drop,truncate,不能直接执行,truncate执行时只做数据删除,不写日起,不维护索引 在PLSQL块中执行字符串 ...

  6. SQL Server 查看identity值的几种方法。

    方法 1. ident_incr('Table_name');#  增量    identity(A,B) 中的B值 ident_seed('Table_name'); # 种子    identit ...

  7. Nginx 配置指令的执行顺序(五)

    Nginx 的 content 阶段是所有请求处理阶段中最为重要的一个,因为运行在这个阶段的配置指令一般都肩负着生成“内容”(content)并输出 HTTP 响应的使命.正因为其重要性,这个阶段的配 ...

  8. SQL 查找某个字段的首字母

    执行以下SQL语句 SELECT ,--或得首字母出现的位置 ),--要替换的字符串 ),''),--替换后的结果 OrderId, * FROM dbo.OrderSync 得到结果如下

  9. 【LeetCode练习题】Next Permutation

    Next Permutation Implement next permutation, which rearranges numbers into the lexicographically nex ...

  10. hdu 1300 Pearls(dp)

    Pearls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...