html之img标签
2014-03-10 10:12
197 查看
本文转自网络。
标签是页面上最为重要的元素之一。很难想象一个页面上没有图片的样子,这样的页面效果将会大打折扣。任何一个前端工程师想必对标签都非常熟悉了,毕竟经常和它打交道嘛。但你真的对它完全了解吗?如果你能准确无误地回答出以下几个关于的问题,那么恭喜你,本文你可以不再往下看了,或者说你可以用省视的目光来核对本文。
问题1:如果在一个页面上插入标签,有哪些属性是必需的?
问题2:标签在HTML和XHTML中有什么区别?
问题3:在一个页面上插入标签,为什么说最好要使用height和width属性?
问题4:标签的onload/onerror/onabort事件,在什么情况下会被触发?
问题5:我们一般知道,当一个图片请求返回404时,会触发onerror事件,那当图片请求返回302时,会触发onerror事件吗?304呢?403呢?500呢?请求超时呢?甚至说当返回200,但内容并非是图片时,也会触发onerror么?
问题6:图片触发onerror事件时,能使用javascript获取到图片请求的响应代码么?
问题7:我们一般知道,标签可以用来发起跨域请求,你能手写出一段正确使用发起跨域请求的javascript代码么?
问题8:用户是可以设置浏览器不显示图片的,尤其是在移动设备上,用户为了节省流量,往往会进行那么,如何获知用户是否禁止浏览图片呢?
下面,我们逐一分析和解答上述的8个问题:
实例:(本实例摘自W3school: http://www.w3school.com.cn )
src属性规定了显示图像的URL,浏览器会对该URL发起Http Get请求。
alt属性则规定了图像的替代文本,在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。如下图:
与src属性相比较,alt属性更容易被设计人员和开发人员所忽视。强烈推荐在文档的每个图像中都使用这个属性,这样即使图像无法显示,用户还是可以看到的一些相关信息,从而大大提高了页面的用户友好性。
如果没有定义图片的height和width属性,那么浏览器为了能够显示每一个加载的图像,它需要先下载图像,然后解析出图像的高度和宽度,并在显示窗口留出相应的屏幕空间,这样就会导致浏览器不断地重新计算/调整页面的布局,这可能会延迟文档的显示,并导致页面重绘。
因此,笔者建议使用的 height 和 width
属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了空间,从而可以加速文档的显示,还可以避免文档内容的移动而引起页面重绘。
但是,需要注意的是:不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width
属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。当然,这个准则在实际应用中也有例外,例如笔者就认为,小比例的图像缩放应该是允许的,此外,如果页面上需要加载同一张图像的不同尺寸的显示,因为浏览器对同一个图像只会请求一次,因此此时就建议使用height
和 width 属性来缩放图像。
onerror: 事件会在文档或图像加载过程中发生错误时被触发。
onabort: 事件会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮,或者在图像下载的过程中。
上面的三句话虽然看起来很简单,但实际上有许多细节需要进一步的研究,尤其是onload和onerror事件。这些细节的问题,将在问题4中提出。
这些问题需要动手做个试验。试验的结果如下表所示:
代码中新建了一个image对象,并绑定了onload, onerror, onabort三个事件处理函数。
但实际上,上述代码存在几个问题,你能看出几个呢?
1)
属性src赋值操作应该在事件绑定之后:否则,有可能出现图片已经加载完毕、但事件绑定尚未完成的情况。例如,在上述代码片段中,如果在第三行和第四行之间增加一句alert(1),就能重现这种情况。
2)
在IE6中,上述事件绑定代码会形成一个循环引用——Image对象的onload属性引用了一个匿名函数对象,而匿名函数通过其作用域链引用会Image对象,这种循环引用会在IE6中导致内存泄露。因此,在onload的匿名函数中,应该解除循环引用,正确的代码类似于:
3)
在IE6中,如果图片是多帧的gif,会触发多次的onload事件。因此,为避免这种情况,也需要在onload事件处理函数中解除事件函数:
注:该问题的解决方案来源于 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:如果在一个页面上插入标签,有哪些属性是必需的?
问题2:标签在HTML和XHTML中有什么区别?
问题3:在一个页面上插入标签,为什么说最好要使用height和width属性?
问题4:标签的onload/onerror/onabort事件,在什么情况下会被触发?
问题5:我们一般知道,当一个图片请求返回404时,会触发onerror事件,那当图片请求返回302时,会触发onerror事件吗?304呢?403呢?500呢?请求超时呢?甚至说当返回200,但内容并非是图片时,也会触发onerror么?
问题6:图片触发onerror事件时,能使用javascript获取到图片请求的响应代码么?
问题7:我们一般知道,标签可以用来发起跨域请求,你能手写出一段正确使用发起跨域请求的javascript代码么?
问题8:用户是可以设置浏览器不显示图片的,尤其是在移动设备上,用户为了节省流量,往往会进行那么,如何获知用户是否禁止浏览图片呢?
下面,我们逐一分析和解答上述的8个问题:
问题1:如果在一个页面上插入标签,有哪些属性是必需的?
答案是src和alt。实例:(本实例摘自W3school: http://www.w3school.com.cn )
src属性规定了显示图像的URL,浏览器会对该URL发起Http Get请求。
alt属性则规定了图像的替代文本,在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。如下图:
与src属性相比较,alt属性更容易被设计人员和开发人员所忽视。强烈推荐在文档的每个图像中都使用这个属性,这样即使图像无法显示,用户还是可以看到的一些相关信息,从而大大提高了页面的用户友好性。
问题2:在一个页面上插入标签,为什么说最好要使用height和width属性?
您在浏览网页的时候,可能会遇到这种情况:随着页面中的图像加载并成功显示,页面上的内容会随之发生不规律的移动,影响您的阅读。这种情况就是因为页面上的图像没有定义height和width属性而导致的。如果没有定义图片的height和width属性,那么浏览器为了能够显示每一个加载的图像,它需要先下载图像,然后解析出图像的高度和宽度,并在显示窗口留出相应的屏幕空间,这样就会导致浏览器不断地重新计算/调整页面的布局,这可能会延迟文档的显示,并导致页面重绘。
因此,笔者建议使用的 height 和 width
属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了空间,从而可以加速文档的显示,还可以避免文档内容的移动而引起页面重绘。
但是,需要注意的是:不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width
属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。当然,这个准则在实际应用中也有例外,例如笔者就认为,小比例的图像缩放应该是允许的,此外,如果页面上需要加载同一张图像的不同尺寸的显示,因为浏览器对同一个图像只会请求一次,因此此时就建议使用height
和 width 属性来缩放图像。
问题3:标签的onload/onerror/onabort事件,在什么情况下会被触发?
onload: 事件会在图像加载完成后立即发生。onerror: 事件会在文档或图像加载过程中发生错误时被触发。
onabort: 事件会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮,或者在图像下载的过程中。
上面的三句话虽然看起来很简单,但实际上有许多细节需要进一步的研究,尤其是onload和onerror事件。这些细节的问题,将在问题4中提出。
问题4:我们一般知道,当一个图片请求返回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 | √ | √ | √ |
问题5:图片触发onerror事件时,能使用javascript获取到图片请求的响应代码么?
很遗憾,目前浏览器厂商尚未提供相关的接口。问题6:我们一般知道,标签可以用来发起跨域请求,你能手写出一段正确使用发起跨域请求的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 }
问题7:用户是可以设置浏览器不显示图片的,尤其是在移动设备上,用户为了节省流量,往往会禁止图片显示。那么,如何获知用户是否禁止浏览图片呢?
注:该问题的解决方案来源于 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事件的发生,则认为浏览器禁止显示图片。
相关文章推荐
- 用Jsoup实现html中img标签地址替换
- <img usemap不能得到outHTML,如何对标签操作
- js正则匹配html标签中的style样式和img标签
- javascript生成img标签的3种实现方法(对象、方法、html)
- 解决html中img标签src中含中文出错的问题
- html——img标签的使用
- android Html img 标签解析
- html知识笔记(三)——img标签、form表单
- 将HTML里标签里的img src属性的相对地址替换成对应的绝对地址
- <img usemap不能得到outHTML,如何对标签操作
- C#替换html代码中所有img标签的路径保留文件名称
- C#正则表达式提取HTML中IMG标签的SRC地址
- C#正则表达式提取HTML中IMG标签的URL地址
- html之内联标签img
- HTML代码中IMG标签的全部属性
- [HTML]img标签属性
- 将html里面的img标签拼上全路径
- SQL获取字段html代码中的img标签图片文件的路径
- <img usemap不能得到outHTML,如何对标签操作
- Java 获取Html文本中的img标签下src中的内容