天天看點

vue圖檔懶加載vue-lazyload插件的使用

使用vue-lazyload的作用:

當網絡請求比較慢的時候,提前給這張圖檔添加一個像素比較低的占位圖檔,不至于堆疊在一塊,或顯示大片空白,讓使用者體驗更好一點。

1.在項目下安裝插件vue-lazyload

   npm install vue-lazyload --save

2.在main.js全局引用vue-lazyload

   import VueLazyload from 'vue-lazyload'

   Vue.use(VueLazyload,{

    error:'img/error.png',

    loading:'img/loading.png'

   })

3.使用vue-lazyload

   <ul>

        <li v-for="img in lists">

              <img v-lazy="img.imgUrl">

        </li>

   </ul>