使用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>