要做懶加載,首先先安裝vue-lazyload 插件
指令是 cnpm i vue-lazyload --save
安裝完畢之后,在main.js文件里面導入插件
import VueLazyload from 'vue-lazyload'//導入插件
//使用vue-lazyload
Vue.use(VueLazyload, {
//懶加載圖片的路徑寫對
loading: 'static/loading-svg/loading-balls.svg',
//這個路徑可以是默認的加載錯誤的dist/error.jpg 或者是loading的圖片,也可以是自定義的圖片
attempt: 3 // default 1
//還有以下配置項
})
這些寫了之后,文件的加載指令就變了:就不是:src=""了
就變成了<img v-lazy="'static/'+item.prodcutImg" alt=""> 路徑還是后臺反饋的數(shù)據(jù),只變化 指令就OK了
lozyload的配置項
可以直接參考官網(wǎng)的說明
https://www.npmjs.com/package/vue-lazyload
