懶加載與預加載

前端性能優化中圖片資源的優化。

1.懶加載（延遲加載）

1.圖片進入可視區域以後請求圖片資源；

2.對於電商等圖片較多，頁面很長的業務場景很適用；

3.能夠減小無效資源的加載；

4.併發加載的資源過多會阻塞js的加載，影響網站的正常使用；

懶加載的要點就是img標籤src屬性爲空（佔位圖），給一個data屬性，裏面存放圖片真實地址，在須要的時候，js動態的將這個地址賦予圖片src屬性。

以下所示：

<img src="" class="image-item" lazyload="true" data-original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />

相似上述代碼所示，當須要時間，用js腳本控制圖片的加載：

var viewHeight = document.documentElement.clientHeight // 可視區域的高度

function lazyload () {
  // 獲取全部要進行懶加載的圖片
  var eles = document.querySelectorAll('img[data-original][lazyload]')     //document.querySelectorAll(selector);返回與指定的選擇器組（selector）匹配的文檔中的元素列表；
  Array.prototype.forEach.call(eles, function (item, index) {
    var rect
    if (item.dataset.original === '')
      return
    rect = item.getBoundingClientRect()
    // 圖片一進入可視區，動態加載
    if (rect.bottom >= 0 && rect.top < viewHeight) {
      !function () {
        var img = new Image()
        img.src = item.dataset.original
        img.onload = function () {
          item.src = img.src
        }
        item.removeAttribute('data-original')
        item.removeAttribute('lazyload')
      }()
    }
  })
}
// 首屏要人爲的調用，不然剛進入頁面不顯示圖片
lazyload()

document.addEventListener('scroll', lazyload)

懶加載的優勢

頁面加載速度快、能夠減輕服務器的壓力、節約了流量,用戶體驗好

2.預加載

預加載的核心要點以下：

1.提早加載圖片,用戶須要查看時從緩存中渲染；

3.對圖片畫廊及圖片佔據很大比例的網站來講十分有利，它保證了圖片快速、無縫地發佈，也可幫助用戶在瀏覽你網站內容時得到更好的用戶體驗；

實現預加載主要有三個方法：

http://web.jobbole.com/86785/

1.html中img標籤最初設置爲display:none；

2.js腳本中使用image對象動態建立好圖片；

3.使用XMLHttpRequest對象能夠更加精細的控制預加載過程，缺點是沒法跨域：

var xmlhttprequest = new XMLHttpRequest(); 
xmlhttprequest.open("GET",src,true);