Vue圖片懶加載

圖片懶加載的原理

先將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