javascript實作圖片懶載入實例

圖片懶載入也是比較常見的一種效能最佳化的方法，這篇文章主要介紹了原生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;)
  }
  }
 }

##########

以上是javascript實作圖片懶載入實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！