基於JS實作圖片懶載入(lazyload)的實例教學

圖片懶載入也是比較常見的一種效能優化的方法，本篇文章主要介紹了原生JS實作圖片懶載入(lazyload)實例，這裡整理了詳細的程式碼,有需要的小夥伴可以參考下

前言

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

實現原理

載入頁面的時候，圖片一直都是流量大頭，針對圖片的效能方法也挺多的例如base64、雪碧圖等；懶加載也是其中一種，主要原理是將非首屏的圖片src設為一個默認值，然後監聽窗口滾動，當圖片出現在窗口中時再給他賦予真實的圖片地址，這樣可以確保首屏的載入速度然後按需載入圖片。

#特定程式碼

#首先在渲染時，圖片引用預設圖片，然後把真實地址放在data-*屬性上面。

<image src=&#39;./../assets/default.png&#39; :src=&#39;item.allPics&#39; class=&#39;lazyloadimg&#39;>

然後是監聽滾動，直接用window.onscroll就可以了，但是要注意一點的是類似於window的scroll和resize，還有mousemove這類觸發很頻繁的事件，最好用節流(throttle)或防手震函數(debounce)來控制觸發頻率。 underscore和lodash裡面都有封裝這兩個方法，這裡先不多做介紹了。

接著要判斷圖片是否出現在了視窗裡面，主要是三個高度：1，當前body從頂部滾動了多少距離。 2，視窗的高度。 3，目前圖片距離頂部的距離。具體程式碼如下：

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(&#39;src&#39;);
   img[i].className = img[i].className.replace(&#39;lazyloadimg&#39;,&#39;&#39;)
  }
  }
 }

#結語

大概內容就這麼多了，下次可能會補充一下防抖節流源碼的實現。最後再補充兩個常見的滾動判斷：

1.頁面滾動離開首屏(這時可顯示回到頂部的按鈕):document.body.scrollTop > window. innerHeight

2.頁面捲動到底部了(這時可去調諧介面取得更多內容)：window.scrollY + window.innerHeight > document.body.offsetHeight

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

以上是基於JS實作圖片懶載入(lazyload)的實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！