<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函数么？

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

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的匿名函数中，应该解除循环引用，正确的代码类似于：

i.onload = function() {
    // do sth.
    
    i.onload = null;
    i = null;
}

3)       在IE6中，如果图片是多帧的gif，会触发多次的onload事件。因此，为避免这种情况，也需要在onload事件处理函数中解除事件函数：

i.onload = function() {
    // do sth.

    i.onload = null;
    i = null;
}

问题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相关的文章。