(二)：圖片加載

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-2-img-required.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-2-img-required/

我們需要的響應(yīng)式圖片解決方案的主要原因之一是<img>元素功能不足。它只有一個(gè)src屬性，只能加載一張圖片資源，但是我們需要加載多個(gè)資源。

既然如此，你可能會(huì)很驚訝怎么我們還在討論<img>元素而不是其他新東西例如<picture>和srcset。

不管采用哪種響應(yīng)式圖片方案，<img>元素必不可少。

<img>元素在所有的內(nèi)聯(lián)響應(yīng)式圖片解決方案中都飽受詬病。我喜歡把img當(dāng)做一個(gè)添加和應(yīng)用所有響應(yīng)式圖片規(guī)則的盒子。

你可以用JavaScript來(lái)監(jiān)控img元素上currentSrc的變化。下面一段簡(jiǎn)單的腳本用來(lái)監(jiān)控改變并輸出到頁(yè)面上：

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;

    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };

  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);

你可以在示例頁(yè)面觀察實(shí)際反映。改變?yōu)g覽器尺寸來(lái)觀察currentsrc的變化。

將你的瀏覽器慢慢的縮小，你將看到如下圖的一個(gè)變化效果：

為什么會(huì)這樣？

<img>總是顯示當(dāng)前資源，這意味著任何與<img>元素交互的JavaScript代碼都會(huì)如期持續(xù)工作。

（還沒提到幾十年來(lái)瀏覽器開發(fā)人員寫的非常有價(jià)值的正確處理圖片代碼）

正如Eric Portis所說，當(dāng)我們使用新的響應(yīng)式圖片標(biāo)準(zhǔn)時(shí)，“我們正逐漸加強(qiáng)img”的特性。

還需要img以外的東西嗎？

在一些場(chǎng)景下單獨(dú)用img可能就夠了：

• 固定寬度，單一分辨率網(wǎng)頁(yè):如果你沒有用響應(yīng)式設(shè)計(jì)并且不用擔(dān)心"retina"屏幕，img元素就夠了。
• 文件尺寸差別很小:對(duì)于有些圖片，最大版本和最小版本的尺寸沒有很大區(qū)別。常見的有l(wèi)ogo，圖標(biāo)和其他不需要根據(jù)視窗變化的小圖片。如果文件尺寸沒什么區(qū)別，一張圖片可能就夠了。
• 使用基于矢量的圖片例如SVG:如果使用基于矢量的圖片格式例如SVG，圖片可以自由縮放并不需要多張圖片。在這種情況下，可以直接用SVG做為img的圖片源。

當(dāng)然，這取決于需要適配的瀏覽器是否支持SVG。最好使用picture元素來(lái)提供可選的圖片格式作為備用方案。會(huì)在這個(gè)系列里將會(huì)介紹這個(gè)元素的使用。

想要支持高分辨率屏幕怎么辦？

如果想要支持高分屏，我們需要擴(kuò)展<img>元素。請(qǐng)看這個(gè)系列的第3部分:Srcset顯示分辨率。