前言

成都創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、漢臺網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為漢臺等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

實現(xiàn)原理

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

具體代碼

首先在渲染時，圖片引用默認圖片，然后把真實地址放在data-*屬性上面。

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

接著要判斷圖片是否出現(xiàn)在了視窗里面，主要是三個高度：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('data-src');
   img[i].className = img[i].className.replace('lazyloadimg','')
  }
  }
 }

結(jié)語

大概內(nèi)容就這么多了，下次可能會補充一下防抖節(jié)流源碼的實現(xiàn)。最后再補充兩個常見的滾動判斷：

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

2.頁面滾動到底部了(這時可去調(diào)接口獲取更多內(nèi)容)：window.scrollY + window.innerHeight > document.body.offsetHeight

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。