您的位置:首页 > 产品设计 > UI/UE

vue项目图片懒加载

2018-03-14 16:20 225 查看
为了提高用户体验度,需要给图片加个懒加载,相关技术文档应该层出不穷,博主出发点是通过记录加深自己的印象
正文从这里开始:
1.打开项目直接安装vue-lazyload,具体操作:npm install vue-lazyload
2.在项目的main.js里全局引用,具体操作:
1).//懒加载
import VueLazyLoad from 'vue-lazyload'2).Vue.use(VueLazyLoad,{
error:'../../../static/images/mrmrmr.png',//加载错误时的显示图片
loading:'../../../static/images/loading.gif'//加载过程中的过渡图片
})
3.现在就可以在需要用到懒加载的页面直接使用了,具体操作:
<img alt="" v-lazy="video.img">//直接让图片的src为空或者不写,然后给img加v-lazy属性,
//v-lazy属性值为后台获取的图片路径
over!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: