<img>标签的方方面面

一曲冷凌霜 提交于 2020-02-06 14:11:46

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


任何一个前端工程师想必对<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相关的文章。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!