圖片懶加載主要是只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，才向服務(wù)器請(qǐng)求圖片設(shè)置圖片正真的路徑，讓圖片顯示出來(lái)。
第一步：安裝lazyload

npm i vue-lazyload -S

第二步：main.js導(dǎo)入lazyload

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  loading: require('assets/images/lazy.png'),
  error: require('assets/images/error.png'),
})

第三步：頁(yè)面使用lazyload，src改為v-lazy

<img v-lazy="item.image" /> 

第四步：修改加載圖片的樣式

img[lazy=loading]{
  transform:scaleX(0.3) scaleY(0.5);
}
img[lazy=loaded]{
  animation:appear 0.3s;  //加載的圖片顯示的動(dòng)畫(huà)
  animation-fill-mode: both;
}
@keyframes appear {
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}