懶加載和預加載的實現

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

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);