摘要：本小節(jié)將討論與圖片加載時(shí)機(jī)相關(guān)的技術(shù)預(yù)加載與懶加載。同樣，可將請(qǐng)求成功與失敗的回調(diào)，作為圖片預(yù)加載成功與失敗的處理。

目前，出于性能與靈活性方面的考慮，我們都將一些小圖片替換成矢量圖或者字體。除了這些能被替換的小圖之外，還有一些不得不使用位圖的場(chǎng)景，如照片、背景等。對(duì)于這些位圖，我們需要考慮它們?cè)诩虞d過(guò)程中的不同狀態(tài)，而制定不同的表現(xiàn)方案。

圖片加載過(guò)程中的狀態(tài)，大致包括：

何時(shí)決定加載圖片

加載中

加載結(jié)束，失敗的處理

本文將對(duì)比加載過(guò)程中的各個(gè)狀態(tài)表現(xiàn)的不同實(shí)現(xiàn)方案，并對(duì)方案的簡(jiǎn)易程度、兼容性、可擴(kuò)展性進(jìn)行分析。

一般情況，頁(yè)面加載時(shí)圖片資源作為多帶帶的請(qǐng)求向服務(wù)器獲取。有時(shí)，由于圖片的數(shù)量與大小的影響，這導(dǎo)致頁(yè)面加載緩慢，而且加載了許多用戶未觸發(fā)的圖片，也白白浪費(fèi)了流量；有時(shí)，又需要保證用戶瀏覽網(wǎng)頁(yè)的流暢性，不得不預(yù)先加載好圖片，等用戶觸發(fā)顯示圖片。

可見(jiàn)，正確的圖片加載時(shí)機(jī)對(duì)提高用戶體驗(yàn)有很大的幫助。本小節(jié)將討論與圖片加載時(shí)機(jī)相關(guān)的技術(shù)：預(yù)加載與懶加載。

預(yù)加載技術(shù)就是在用戶觸發(fā)圖片顯示之前，先將圖片加載到本地。當(dāng)用戶觸發(fā)圖片顯示的事件時(shí)，瀏覽器能夠及時(shí)渲染出圖片，保證了用戶瀏覽網(wǎng)頁(yè)的流暢性。那么，如何實(shí)現(xiàn)預(yù)加載呢？本文將介紹三種實(shí)現(xiàn)預(yù)加載的技術(shù)。

利用CSS實(shí)現(xiàn)預(yù)加載

該方法只需將欲加載的圖片url寫(xiě)入某個(gè)隱藏元素的background屬性中，讓這張圖片和CSS文件同時(shí)加載。當(dāng)用戶觸發(fā)顯示圖片的事件時(shí)，再將圖片插入到目標(biāo)位置。

如下代碼所示，這里用到CSS3的background多圖片特性，只需一個(gè)隱藏元素即可預(yù)加載所有圖片。

.nothing-1 {
    display: none;
    background: url("1.jpg"), url("2.jpg"), url("3.jpg"); 
}

（關(guān)于background多圖片特性的兼容性：http://caniuse.com/#search=cs... ）

該方法的缺點(diǎn)在于無(wú)法控制預(yù)加載的時(shí)機(jī)，只能是頁(yè)面加載時(shí)一起加載圖片，如果圖片過(guò)多，會(huì)阻塞頁(yè)面的load事件，延長(zhǎng)頁(yè)面加載時(shí)間。

只利用JavaScript實(shí)現(xiàn)預(yù)加載

第二種實(shí)現(xiàn)預(yù)加載的技術(shù)，是直接使用JavaScript新建Image對(duì)象，對(duì)其src屬性賦值。

如下代碼所示：

var image = new Image();
image.src = "...img url";
image.onload = function() { ... }
image.onerror = function () { ... }

還可以利用Image對(duì)象的load事件和error事件，完成圖片預(yù)加載和失敗之后的處理，如所有圖片加載完成后的提示等。

利用Ajax實(shí)現(xiàn)預(yù)加載

最后這種方法則是直接發(fā)送ajax請(qǐng)求，獲取圖片資源。同樣，可將ajax請(qǐng)求成功與失敗的回調(diào)，作為圖片預(yù)加載成功與失敗的處理。

如下代碼所示（僅針對(duì)webkit瀏覽器）：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) { 
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      ...
    }
  }
}
xhr.open("GET", "...img url");
xhr.send("");

Ajax請(qǐng)求方法無(wú)需多余的Image對(duì)象，而且獲取的資源也不僅局限于圖片。

懶加載的核心思想是根據(jù)用戶需要加載圖片資源，并非在渲染頁(yè)面時(shí)就獲取所有圖片。如此，不僅可以減輕服務(wù)器的壓力節(jié)省用戶流量，還可以提高頁(yè)面加載速度。

實(shí)現(xiàn)思路

首先，將頁(yè)面中所有圖片url寫(xiě)進(jìn)img的"data-src"屬性，并將默認(rèn)的loading圖片寫(xiě)入src，作為加載中的圖片樣式。

其次，是確定判斷圖片加載的時(shí)機(jī)，即當(dāng)圖片進(jìn)入瀏覽器的可視區(qū)域中時(shí)。那么問(wèn)題來(lái)了，如何判斷某個(gè)元素進(jìn)入可視區(qū)域呢？

以垂直方向?yàn)槔袛嘣厥欠襁M(jìn)入可視區(qū)，首先我們需要知道：

可視區(qū)域的高度：window.innerHeight（IE9以前不可用）|| document.documentElement.clientHeight (IE標(biāo)準(zhǔn)模式)；

元素相對(duì)于可視區(qū)域頂端位置：element.getBoundingClientRect().top；

元素相對(duì)于可視區(qū)域底端位置：element.getBoundingClientRect().bottom；

判斷是否進(jìn)入可視區(qū)，即判斷元素的頂部相對(duì)于可視區(qū)域頂端位置是否大于0，且又小于可視區(qū)域高度；或者，元素的底部相對(duì)于可視區(qū)域底端位置是否大于0，且又小于可視區(qū)域高度。

上圖中列出了元素進(jìn)入可視區(qū)的所有情形，從上到下來(lái)看，第一個(gè)元素的top與bottom的值都小于0，不在可視區(qū)內(nèi)；第二個(gè)元素的top小于0，而bottom卻在0到clientHeight之間，已在可視區(qū)內(nèi)，需要加載；第三個(gè)元素的top與bottom都滿足條件，在可視區(qū)中；剩下的兩個(gè)元素與頭兩元素情況一致。

等到元素進(jìn)入可視區(qū)域，就將img元素的"data-src"屬性賦值給"src"屬性，并標(biāo)記該img元素正在加載，不再做此處理。

以上過(guò)程偽代碼如下：

function check() {
  imgs.forEach(function(img, index) {
    if (loadedList.indexOf(index) >= 0) {
      return;
    }
    if (!isInClient(container)) {
      return;
    }
    loadedList.push(index);
    loadImage(img);
  })
}

最后，將判斷圖片進(jìn)入可視區(qū)域后加載的check函數(shù)，寫(xiě)入window的scroll和resize事件即可。

優(yōu)化思路

有時(shí)用戶若只想查看排序較后的圖片，會(huì)快速滾動(dòng)滾動(dòng)條，這種情況下快速滾動(dòng)過(guò)的圖片也沒(méi)有必要加載了。

該優(yōu)化的實(shí)現(xiàn)思路也很簡(jiǎn)單，延遲加載邏輯，計(jì)時(shí)器一到再判斷元素是否還在可視區(qū)域，可將代碼修改為如下：

function check() {
  imgs.forEach(function(img, index) {
    if (loadedList.indexOf(index) >= 0) {
      return;
    }
    if (!isInClient(container)) {
      return;
    }
    
    setTimeout(function() {
      if (!isInClient(container)) {
        return;
      }
      loadedList.push(index)
      loadImage(img)
    }, 1000);
  })
}

圖片出于加載中的狀態(tài)時(shí)，需要給用戶“圖片正在加載”的提示，圖片加載完成后，將提示隱藏。下面，本文將給出加載中提示的兩種實(shí)現(xiàn)方案。

此方案的實(shí)現(xiàn)思路是：將“加載中”提示作為img的背景，當(dāng)圖片正在加載中時(shí)，頁(yè)面顯示的是背景；圖片加載完成，則覆蓋了背景顯示出圖片。
關(guān)鍵代碼：

.img {
    width: 500px;
    height: 300px;
    background: url("data:image/gif;base64,...") center no-repeat;
}

這里將“加載中”的動(dòng)態(tài)圖片作為img標(biāo)簽的background，并且轉(zhuǎn)換base64編碼，這樣可以減少一次請(qǐng)求。

瀏覽器兼容情況見(jiàn)下表：

兼容性沒(méi)有問(wèn)題，唯一的限制是需要設(shè)定.img的寬高。若事先無(wú)法得到圖片的寬高，則可以在img標(biāo)簽外套一層

    


img {
    height: 100%;
}

Array.from(document.getElementsByTagName("img")).forEach(img => {
    const image = new Image();
    image.src = img.dataset.src;
    image.onload = () => img.src = image.src;
})

.broken-image {
    width: 100%;
    position: relative;
    min-height: 50px;
}

.broken-image:before {
    content: " ";
    position: absolute;
    top: -10px;
    left: 0;
    height: calc(100% + 10px);
    width: 100%;
    background-color: rgb(230, 230, 230);
    border: 2px dotted rgb(200, 200, 200);
    border-radius: 5px;
}

.broken-image:after {
    content: "f127" " Broken Image ";
    display: block;
    font-size: 16px;
    font-style: normal;
    font-family: FontAwesome;
    color: rgb(100, 100, 100);
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 2;
}

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Array.from(document.getElementsByTagName("img")).forEach(img => {
  img.onerror = () => {
      img.onerror = null;
      img.src = "data:image/gif;base64...";
  }
});

• 上一篇：翻譯：如何使用CSS實(shí)現(xiàn)多行文本的省略號(hào)顯示
• 下一篇：CSS選擇器