vue 图片懒加载 lazyload最的使用

图片懒加载就是初始时统一将img的src设置为一张默认图片,当图片加载完出来,才将真正的图片链接填入img的src属性。使用步骤如下:

1 安装插件
cnpm install vue-lazyload --save-dev

2 main.js引入

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:require('./statics/site/imgs/erro.jpg'),
    loading:require('./statics/site/imgs/load.gif')
})

3 vue文件中将图片 :src="" 修改为 v-lazy=""

<img v-lazy="img"/>

猜你喜欢

转载自blog.csdn.net/smlljet/article/details/90256805
今日推荐