html之img标签
来源:互联网 发布:实用软件 编辑:程序博客网 时间:2024/05/04 11:00
本文转自网络。
问题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 属性来缩放图像。
问题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)
2)
1 i.onload = function() {2 // do sth.3 4 i.onload = null;5 i = null;6 }
3)
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==";
而在IE中,Image的complete属性会一直为false。因此,但我们注意到,当IE禁止显示图片时,是不会触发Image对象的onload/onerror/onabort事件的。针对该特性,我们使用setTimeout函数,当在一定的时间内没有检测onload/onerror/onabort事件的发生,则认为浏览器禁止显示图片。
- html之img标签
- 前端html之img标签
- HTML学习之路02--img标签
- HTML <img> 标签
- HTML <img> 标签
- HTML-认识<img>标签
- HTML<a>标签,<img>标签
- HTML img标签之onAbort、onError、onLoad事件与问题
- HTML img标签之onAbort、onError、onLoad事件与问题
- (22)HTML标签详解之<img><map><area>
- HTML img标签之onAbort、onError、onLoad事件与问题
- HTML img标签之 onError onLoad onAbort 事件
- HTML标签<img><map><area>
- HTML img标签align属性
- HTML <img>标签路径问题
- HTML标签img--改变图片尺寸
- android Html img 标签解析
- 3-HTML中的img标签
- 怎样用word写音乐简谱
- Lpad()函数与Rpad()函数简介
- 层次化查询
- 【原创】aspx和html之间的区别
- html中特殊字符引用
- html之img标签
- input中id和name的区别
- InnerHtml和InnerText的区别
- hdu1683--Colour sequence
- 我为什么要结婚 ---余华
- packettracer线缆两端亮点的颜色的…
- RS-232接口
- [算法导论]最大堆
- [原创]packet tracer详解1_软…