<img>标签
<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相关的文章。