本文转自网络。
-
问题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事件的发生,则认为浏览器禁止显示图片。