圖片懶加載的原理

先將img標簽中的src鏈接設為同一張圖片（空白圖片），將其真正的圖片地址存儲再img標簽的自定義屬性中（比如data-src）。當js監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。
這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰等問題。

實現步驟：

1.安裝插件：

   npm install vue-lazyload --save-dev
   
   2. main.js引入插件：
   import VueLazyLoad from ‘vue-lazyload‘
   Vue.use(VueLazyLoad,{
 

    error:require(‘./statics/site/imgs/erro.jpg‘),
    loading:require(‘./statics/site/imgs/load.gif‘)
   })
   
   3.vue文件中將需要懶加載的圖片綁定 v-bind:src 修改為 v-lazy

   <img v-lazy="item">
  
   備註：若全局安裝了Mint UI，在main.js中引入了Mint UI可以省略步驟1和2。

   詳細解讀參考鏈接：https://mp.weixin.qq.com/s/Syqoz_Hkh7JY4GYIu_TE3A

Vue圖片懶加載