首页 > 其他 > 详细

vue图片懒加载

时间:2019-04-23 00:24:37      阅读:169      评论:0      收藏:0      [点我收藏+]

不管使用ElementUI还是vant UI,

vue中使用懒加载,先要安装:vue lazyload插件

一. vue lazyload插件:

插件地址:https://github.com/hilongjw/vue-lazyload

demo:http://hilongjw.github.io/vue-lazyload/

 

1. 安装插件:

npm install vue-lazyload --save-dev

2. main.js引入插件:

import VueLazyLoad from ‘vue-lazyload‘
Vue.use(VueLazyLoad,{
    error:‘./static/error.png‘,
    loading:‘./static/loading.png‘
})

3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 

<img class="item-pic" v-lazy="newItem.picUrl"/>

 

 

 

https://www.cnblogs.com/xyyt/p/7650539.html

vue图片懒加载

原文:https://www.cnblogs.com/wayneliu007/p/10753846.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!