基于vue优化之图片懒加载

基于vue优化之图片懒加载

首先下载npm install vue-lazyload --save

一、在main.js中引入使用

// 图片懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('@/assets/empty_chanping.png'),//加载中图片，一定要有，不然会一直重复加载占位图
error: require('@/assets/empty_chanping.png') //加载失败图片
});


二、使用

//imgUrl 图片路径



三、总结

在项目中大量使用图片时使用图片懒加载会起到很好的优化效果。