< img> 標(biāo)簽是頁面上最為重要的元素之一臀防。很難想象一個(gè)頁面上沒有圖片的樣子眠菇，這樣的頁面效果將會(huì)大打折扣。

任何一個(gè)前端工程師想必對(duì)< img>標(biāo)簽都非常熟悉了袱衷，畢竟經(jīng)常和它打交道嘛捎废。但你真的對(duì)它完全了解嗎？如果你能準(zhǔn)確無誤地回答出以下幾個(gè)關(guān)于< img>的問題致燥，那么恭喜你登疗，本文你可以不再往下看了，或者說你可以用省視的目光來核對(duì)本文嫌蚤。

• 問題1：如果在一個(gè)頁面上插入< img>標(biāo)簽辐益，有哪些屬性是必需的？
• 問題2：< img>標(biāo)簽在HTML和XHTML中有什么區(qū)別脱吱？
• 問題3：在一個(gè)頁面上插入< img>標(biāo)簽智政，為什么說最好要使用height和width屬性？
• 問題4：< img>標(biāo)簽的onload/onerror/onabort事件箱蝠，在什么情況下會(huì)被觸發(fā)续捂？
• 問題5：我們一般知道，當(dāng)一個(gè)圖片請(qǐng)求返回404時(shí)宦搬，會(huì)觸發(fā)onerror事件牙瓢，那當(dāng)圖片請(qǐng)求返回302時(shí)，會(huì)觸發(fā)onerror事件嗎间校？304呢矾克？403呢？500呢憔足？請(qǐng)求超時(shí)呢胁附？甚至說當(dāng)返回200，但內(nèi)容并非是圖片時(shí)四瘫，也會(huì)觸發(fā)onerror么汉嗽？
• 問題6：圖片觸發(fā)onerror事件時(shí)，能使用javascript獲取到圖片請(qǐng)求的響應(yīng)代碼么找蜜？
• 問題7：我們一般知道饼暑，< img>標(biāo)簽可以用來發(fā)起跨域請(qǐng)求，你能手寫出一段正確使用< img>發(fā)起跨域請(qǐng)求的javascript代碼么？
• 問題8：用戶是可以設(shè)置瀏覽器不顯示圖片的弓叛，尤其是在移動(dòng)設(shè)備上彰居，用戶為了節(jié)省流量，往往會(huì)進(jìn)行那么撰筷，如何獲知用戶是否禁止瀏覽圖片呢陈惰？

問題1：如果在一個(gè)頁面上插入< img>標(biāo)簽，有哪些屬性是必需的毕籽？

答案是src和alt抬闯。
實(shí)例：（本實(shí)例摘自W3school: http://www.w3school.com.cn ）
< img src=" http://www.w3school.com.cn/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />

src屬性規(guī)定了顯示圖像的URL，瀏覽器會(huì)對(duì)該URL發(fā)起Http Get請(qǐng)求关筒。
alt屬性則規(guī)定了圖像的替代文本溶握，在圖像無法顯示或者用戶禁用圖像顯示時(shí)，代替圖像顯示在瀏覽器中的內(nèi)容蒸播。如下圖：

與src屬性相比較睡榆，alt屬性更容易被設(shè)計(jì)人員和開發(fā)人員所忽視，事實(shí)上袍榆，在筆者撰寫本文時(shí)胀屿，即使在國內(nèi)一些大型門戶網(wǎng)站首頁上（例如新浪、搜狐）包雀，我們也可以找到許多沒有alt屬性的< img>標(biāo)簽宿崭。但筆者強(qiáng)烈推薦在文檔的每個(gè)圖像中都使用這個(gè)屬性，這樣即使圖像無法顯示馏艾，用戶還是可以看到的一些相關(guān)信息劳曹，從而大大提高了頁面的用戶友好性。

問題2：< img>標(biāo)簽在HTML和XHTML中有什么區(qū)別琅摩？

（答案摘自W3school: http://www.w3school.com.cn）
在 HTML 中铁孵，< img> 標(biāo)簽沒有結(jié)束標(biāo)簽。例如：
< img src=" http://www.w3school.com.cn/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" >

在 XHTML 中房资，< img> 標(biāo)簽必須被正確地關(guān)閉蜕劝。
< 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：在一個(gè)頁面上插入< img>標(biāo)簽唉俗，為什么說最好要使用height和width屬性嗤朴？

您在瀏覽網(wǎng)頁的時(shí)候，可能會(huì)遇到這種情況：隨著頁面中的圖像加載并成功顯示虫溜，頁面上的內(nèi)容會(huì)隨之發(fā)生不規(guī)律的移動(dòng)雹姊，影響您的閱讀。這種情況就是因?yàn)轫撁嫔系膱D像沒有定義height和width屬性而導(dǎo)致的衡楞。

如果沒有定義圖片的height和width屬性吱雏，那么瀏覽器為了能夠顯示每一個(gè)加載的圖像，它需要先下載圖像瘾境，然后解析出圖像的高度和寬度歧杏，并在顯示窗口留出相應(yīng)的屏幕空間，這樣就會(huì)導(dǎo)致瀏覽器不斷地重新計(jì)算/調(diào)整頁面的布局寄雀，這可能會(huì)延遲文檔的顯示得滤，并導(dǎo)致頁面重繪陨献。

因此盒犹，筆者建議使用< img>的 height 和 width 屬性來指定圖像的尺寸。這樣的話眨业，瀏覽器在下載圖像之前就為其預(yù)留出了空間急膀，從而可以加速文檔的顯示，還可以避免文檔內(nèi)容的移動(dòng)而引起頁面重繪龄捡。

但是卓嫂，需要注意的是：不要通過 height 和 width 屬性來縮放圖像。如果通過 height 和 width 屬性來縮小圖像聘殖，那么用戶就必須下載大容量的圖像（即使圖像在頁面上看上去很谐况ā）。正確的做法是奸腺，在網(wǎng)頁上使用圖像之前餐禁，應(yīng)該通過軟件把圖像處理為合適的尺寸。當(dāng)然突照，這個(gè)準(zhǔn)則在實(shí)際應(yīng)用中也有例外帮非，例如筆者就認(rèn)為，小比例的圖像縮放應(yīng)該是允許的讹蘑，此外末盔，如果頁面上需要加載同一張圖像的不同尺寸的顯示，因?yàn)闉g覽器對(duì)同一個(gè)圖像只會(huì)請(qǐng)求一次座慰，因此此時(shí)就建議使用height 和 width 屬性來縮放圖像陨舱。

問題4：< img>標(biāo)簽的onload/onerror/onabort事件，在什么情況下會(huì)被觸發(fā)版仔？

onload: 事件會(huì)在圖像加載完成后立即發(fā)生游盲。

onerror: 事件會(huì)在文檔或圖像加載過程中發(fā)生錯(cuò)誤時(shí)被觸發(fā)心剥。

onabort: 事件會(huì)在圖像加載被中斷時(shí)發(fā)生。例如用戶單擊了瀏覽器的Stop按鈕背桐，或者在圖像下載的過程中优烧。

上面的三句話雖然看起來很簡單，但實(shí)際上有許多細(xì)節(jié)需要進(jìn)一步的研究链峭，尤其是onload和onerror事件畦娄。這些細(xì)節(jié)的問題，將在問題5中提出弊仪。

問題5：我們一般知道熙卡，當(dāng)一個(gè)圖片請(qǐng)求返回404時(shí)，會(huì)觸發(fā)onerror事件励饵，那當(dāng)圖片請(qǐng)求返回302時(shí)驳癌，會(huì)觸發(fā)onerror事件嗎？304呢役听？403呢颓鲜？500呢？請(qǐng)求超時(shí)呢典予？甚至說當(dāng)返回200甜滨，但內(nèi)容并非是圖片時(shí)，也會(huì)觸發(fā)onerror么瘤袖？

這些問題需要?jiǎng)邮肿鰝€(gè)試驗(yàn)衣摩。試驗(yàn)的結(jié)果如下表所示：

問題6：圖片觸發(fā)onerror事件時(shí)磕诊，能使用javascript獲取到圖片請(qǐng)求的響應(yīng)代碼么？

很遺憾纹腌，目前瀏覽器廠商尚未提供相關(guān)的接口霎终。

問題7：我們一般知道，< img>標(biāo)簽可以用來發(fā)起跨域請(qǐng)求升薯，你能手寫出一段正確使用< img>發(fā)起跨域請(qǐng)求的javascript函數(shù)么莱褒？

這個(gè)問題看起來很簡單，或許你很快的就寫出了以下代碼：

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.
    }
}

代碼中新建了一個(gè)image對(duì)象涎劈，并綁定了onload, onerror, onabort三個(gè)事件處理函數(shù)广凸。

但實(shí)際上阅茶，上述代碼存在幾個(gè)問題，你能看出幾個(gè)呢谅海？

1.   屬性src賦值操作應(yīng)該在事件綁定之后：否則脸哀，有可能出現(xiàn)圖片已經(jīng)加載完畢、但事件綁定尚未完成的情況扭吁。例如撞蜂，在上述代碼片段中，如果在第三行和第四行之間增加一句alert(1)侥袜，就能重現(xiàn)這種情況蝌诡。
   

2.   在IE6中，上述事件綁定代碼會(huì)形成一個(gè)循環(huán)引用——Image對(duì)象的onload屬性引用了一個(gè)匿名函數(shù)對(duì)象枫吧，而匿名函數(shù)通過其作用域鏈引用會(huì)Image對(duì)象浦旱，這種循環(huán)引用會(huì)在IE6中導(dǎo)致內(nèi)存泄露。因此九杂，在onload的匿名函數(shù)中颁湖，應(yīng)該解除循環(huán)引用，正確的代碼類似于：
   

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

3.   在IE6中尼酿，如果圖片是多幀的gif爷狈，會(huì)觸發(fā)多次的onload事件。因此裳擎，為避免這種情況，也需要在onload事件處理函數(shù)中解除事件函數(shù)：
   

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

問題8：用戶是可以設(shè)置瀏覽器不顯示圖片的思币，尤其是在移動(dòng)設(shè)備上鹿响，用戶為了節(jié)省流量，往往會(huì)禁止圖片顯示谷饿。那么惶我，如何獲知用戶是否禁止瀏覽圖片呢？

注：該問題的解決方案來源于 http://stackoverflow.com/questions/8379156/how-to-detect-if-images-are-disabled-in-browser博投，筆者對(duì)其中的原理和代碼bug做了相應(yīng)的解讀和修復(fù)绸贡。

在Firefox和Chrome中，可以使用Image對(duì)象的complete屬性來解決此問題：設(shè)置Image對(duì)象的src屬性毅哗，以請(qǐng)求一個(gè)不存在的圖片听怕，當(dāng)瀏覽器禁止顯示圖片時(shí)，Image對(duì)象的complete屬性為true虑绵，否則為false尿瞭。

在Opera中，也可以使用Image對(duì)象的complete屬性翅睛，但它與Firefox和Chrome的不同声搁，設(shè)置Image的src后黑竞，在onload之前，它一直顯示為false疏旨。但我們可以將圖片的src設(shè)置為一個(gè)特殊的值：img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 這樣很魂，當(dāng)Opera禁止顯示圖片時(shí)，Image的complete屬性為false檐涝，否則為true莫换。

而在IE中，Image的complete屬性會(huì)一直為false骤铃。因此拉岁，但我們注意到，當(dāng)IE禁止顯示圖片時(shí)惰爬，是不會(huì)觸發(fā)Image對(duì)象的onload/onerror/onabort事件的喊暖。針對(duì)該特性，我們使用setTimeout函數(shù)撕瞧，當(dāng)在一定的時(shí)間內(nèi)沒有檢測onload/onerror/onabort事件的發(fā)生陵叽，則認(rèn)為瀏覽器禁止顯示圖片。

參考文章:http://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html

————
前端·小h
紙上得來終覺淺丛版，絕知此事要躬行