vue项目图片懒加载
为了提高用户体验度,需要给图片加个懒加载,相关技术文档应该层出不穷,博主出发点是通过记录加深自己的印象
正文从这里开始:
1.打开项目直接安装vue-lazyload,具体操作:npm install vue-lazyload
2.在项目的main.js里全局引用,具体操作:
【vue项目图片懒加载】1).
//懒加载 import VueLazyLoad from 'vue-lazyload'
2).
Vue.use(VueLazyLoad,{ error:'../../../static/images/mrmrmr.png',//加载错误时的显示图片 loading:'../../../static/images/loading.gif'//加载过程中的过渡图片 })
3.现在就可以在需要用到懒加载的页面直接使用了,具体操作:
//直接让图片的src为空或者不写,然后给img加v-lazy属性,
//v-lazy属性值为后台获取的图片路径
over!