原生JS實現圖片懶加載(lazyload)

前言

 圖片懶加載也是比較常見的一種性能優化的方法，最近在用vue作一個新聞列表的客戶端時也用到了，這裏就簡單介紹下實現原理和部分代碼。

---

實現原理

 加載頁面的時候，圖片一直都是流量大頭，針對圖片的性能方法也挺多的好比base6四、雪碧圖等；懶加載也是其中一種，主要原理是將非首屏的圖片src設爲一個默認值，而後監聽窗口滾動，當圖片出如今視窗中時再給他賦予真實的圖片地址，這樣能夠保證首屏的加載速度而後按需加載圖片。

具體代碼

 首先在渲染時，圖片引用默認圖片，而後把真實地址放在data-*屬性上面。
<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>
 而後是監聽滾動，直接用window.onscroll就能夠了，可是要注意一點的是相似於window的scroll和resize，還有mousemove這類觸發很頻繁的事件，最好用節流(throttle)或防抖函數(debounce)來控制一下觸發頻率。underscore和lodash裏面都有封裝這兩個方法，這裏先很少作介紹了。

 接着要判斷圖片是否出如今了視窗裏面，主要是三個高度：1，當前body從頂部滾動了多少距離。2，視窗的高度。3，當前圖片距離頂部的距離。offsetTop相關屬性能夠參考這裏，具體代碼以下：

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {

var bodyScrollHeight =  document.body.scrollTop;// body滾動高度
  var windowHeight = window.innerHeight;// 視窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
    var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度  
    if (imgHeight  < windowHeight  + bodyScrollHeight) {
       imgs[i].src = imgs[i].getAttribute('data-src');
       img[i].className = img[i].className.replace('lazyloadimg','')
    }
  }
}

---

結語

 大概內容就這麼多了，下次可能會補充一下防抖節流源碼的實現。最後再補充兩個常見的滾動判斷：
1.頁面滾動離開首屏(這時可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight
2.頁面滾動到底部了(這時可去調接口獲取更多內容)：window.scrollY + window.innerHeight > document.body.offsetHeight