< img> 標簽是頁面上最為重要的元素之一。很難想象一個頁面上沒有圖片的樣子，這樣的頁面效果將會大打折扣。

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

• 問題1：如果在一個頁面上插入< img>標簽，有哪些屬性是必需的？
• 問題2：< img>標簽在HTML和XHTML中有什么區(qū)別？
• 問題3：在一個頁面上插入< img>標簽，為什么說最好要使用height和width屬性？
• 問題4：< img>標簽的onload/onerror/onabort事件，在什么情況下會被觸發(fā)？
• 問題5：我們一般知道，當(dāng)一個圖片請求返回404時，會觸發(fā)onerror事件，那當(dāng)圖片請求返回302時，會觸發(fā)onerror事件嗎？304呢？403呢？500呢？請求超時呢？甚至說當(dāng)返回200，但內(nèi)容并非是圖片時，也會觸發(fā)onerror么？
• 問題6：圖片觸發(fā)onerror事件時，能使用javascript獲取到圖片請求的響應(yīng)代碼么？
• 問題7：我們一般知道，< img>標簽可以用來發(fā)起跨域請求，你能手寫出一段正確使用< img>發(fā)起跨域請求的javascript代碼么？
• 問題8：用戶是可以設(shè)置瀏覽器不顯示圖片的，尤其是在移動設(shè)備上，用戶為了節(jié)省流量，往往會進行那么，如何獲知用戶是否禁止瀏覽圖片呢？

問題1：如果在一個頁面上插入< img>標簽，有哪些屬性是必需的？

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

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

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

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

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

在 XHTML 中，< img> 標簽必須被正確地關(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：在一個頁面上插入< img>標簽，為什么說最好要使用height和width屬性？

您在瀏覽網(wǎng)頁的時候，可能會遇到這種情況：隨著頁面中的圖像加載并成功顯示，頁面上的內(nèi)容會隨之發(fā)生不規(guī)律的移動，影響您的閱讀。這種情況就是因為頁面上的圖像沒有定義height和width屬性而導(dǎo)致的。

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

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

但是，需要注意的是：不要通過 height 和 width 屬性來縮放圖像。如果通過 height 和 width 屬性來縮小圖像，那么用戶就必須下載大容量的圖像（即使圖像在頁面上看上去很小）。正確的做法是，在網(wǎng)頁上使用圖像之前，應(yīng)該通過軟件把圖像處理為合適的尺寸。當(dāng)然，這個準則在實際應(yīng)用中也有例外，例如筆者就認為，小比例的圖像縮放應(yīng)該是允許的，此外，如果頁面上需要加載同一張圖像的不同尺寸的顯示，因為瀏覽器對同一個圖像只會請求一次，因此此時就建議使用height 和 width 屬性來縮放圖像。

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

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

onerror: 事件會在文檔或圖像加載過程中發(fā)生錯誤時被觸發(fā)。

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

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

問題5：我們一般知道，當(dāng)一個圖片請求返回404時，會觸發(fā)onerror事件，那當(dāng)圖片請求返回302時，會觸發(fā)onerror事件嗎？304呢？403呢？500呢？請求超時呢？甚至說當(dāng)返回200，但內(nèi)容并非是圖片時，也會觸發(fā)onerror么？

這些問題需要動手做個試驗。試驗的結(jié)果如下表所示：

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

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

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

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

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三個事件處理函數(shù)。

但實際上，上述代碼存在幾個問題，你能看出幾個呢？

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

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

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

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

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

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

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

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

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

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

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

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