懶加載和預加載的實現

提到前端性能優化中圖片資源的優化，懶加載和預加載就不能不說，下面我用最簡潔明瞭的語言，說明懶加載和預加載的核心要點以及實現。

1.懶加載

懶加載的要點以下：

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

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

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

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

如何實現懶加載呢？要點就是html中img標籤src屬性爲空，給一個data屬性，裏面存放圖片真實地址，在須要的時候，動態的將這個地址賦予圖片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]')
  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.圖片等靜態資源在使用以前的提早請求；

2.資源後續使用時能夠從緩存中加載，提高用戶體驗；

3.頁面展現的依賴關係維護（必需的資源加載完才能夠展現頁面，防止白屏等）；

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

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

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

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

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