我们应该感谢相遇,无论结局是喜是悲....
<IMG>标签的方方面面
  • 首页 > IT技术
  • 作者:起点终站
  • 2016年8月8日 17:55 星期一
  • 浏览:3269
  • 字号:
  • 评论:12
  • <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函数么?

    这个问题看起来很简单,或许你很快的就写出了以下代码:


    function setImageSrc() {
        var i = new Image();
        i.src = "http://.../1.gif";
        i.onload = function() {
            // do sth.
        };
    
        i.onerror = function() {
            // do sth.
        }
    
        i.onabort = function() {
            // do sth.
        }
    }


    代码中新建了一个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事件的发生,则认为浏览器禁止显示图片。


    具体的代码如下:


    <script type="text/javascript">
            detectImageEnabledMode({
                onDetectImageIsDisabled:function(){
                    alert('disabled');
                },
                onDetectImageIsEnabled:function(){
                    alert('enabled');
                }
            });
    
            // 用来检测浏览器是否禁止显示图片
         // 参数options: onDetectImageIsDisabled,检测到禁止显示图片后的回调函数;onDetectImageIsEnabled, 检测到显示图片后的回调函数
         function detectImageEnabledMode(options){
                /* define disabled/enabled actions */
                var actionCounter = 0;
                var enabledAction = options.onDetectImageIsEnabled || function() {};
                var enaledActionRun = function(){
                    if(actionCounter) 
                        return;
                    actionCounter++;
                    enabledAction();
                }
    
                var disabledAction = options.onDetectImageIsDisabled || function(){};
                var disabledActionRun = function(){
                    if(actionCounter) return;
                    actionCounter++;
                    disabledAction();
                }        
                
                /* create image */
                var img = new Image();
                var currentTime = (+new Date);
                if(navigator.appName.indexOf('Microsoft Internet Explorer') != -1){// ie
                    img.onload = i.onerror = i.onabort = enaledActionRun;
    
                    // 试图访问一个不存在的图片
                    img.src = currentTime+'.'+currentTime+'?time='+currentTime;
                    // 如果500毫秒后,尚未触发图片的onload/onerror/onabort事件,则认为浏览器禁止了图片显示
                    setTimeout(function(){
                        disabledActionRun();
                    }, 500);
                }else if (navigator.appName.indexOf('Opera') != -1) {// opera
                    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="+'?time='+currentTime;
    
                    // 禁止图片显示时,img.complete==false
                    if(img.complete){ 
                        enaledActionRun();
                    }else{
                        disabledActionRun();
                    }
                }else{// firefox chrome safari
                    // 试图访问一个不存在的图片
                    img.src = currentTime+'.'+currentTime+'?time='+currentTime;
    
                    // 禁止图片显示时,img.complete==true
                    if(img.complete){
                        disabledActionRun();
                    }else{
                        enaledActionRun();
                    }
                }
            }
        </script>


    至此,相信你已经对Image有了更进一步的了解了。事实上,还有与Image相关的许多技巧在本文没有提及,例如Image的lazyload。大家在实际编程中可以慢慢接触和了解。在以后的文章中,我也会根据实际情况持续地写一些与Image相关的文章。



    转自hencehong

      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: <IMG>标签的方方面面
    本文地址:https://blog.hellozwh.com/?post=167
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    奇虎分享网2016-08-17 01:39
    感谢分享 祝您开心快乐每一天!
    谢谢分享。还有弹幕 。
    秋枫落叶 没错,我就是那个帅逼站长---的朋友2016-08-11 00:10
    有所了解了 [嘻嘻]
    起点终站 没错,我就是那个帅逼站长2016-08-11 10:15
    [害羞] 有收获就好
    佩服会代码的 大神!!!
    起点终站 没错,我就是那个帅逼站长2016-08-10 21:03
    我也佩服
    博客大全网2016-08-09 15:26
    感谢分享
    起点终站 没错,我就是那个帅逼站长2016-08-09 17:51
    感谢来访 [嘻嘻]
    奇草导航2016-08-09 08:16
    [嘻嘻] 早上好。网站不错,尤其是底部友链,威武霸气。
    起点终站 没错,我就是那个帅逼站长2016-08-09 10:10
    你这样夸我,我会骄傲的
    奇草导航2016-08-09 13:53
    [哈哈] 实事求是嘛。飘飘然的感觉,谁都喜欢,蛮好的。
    起点终站 没错,我就是那个帅逼站长2016-08-09 14:20
    我很欣赏你的坦白?快把我加上你导航
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放