本文主要介绍图片懒加载vue-lazyload的使用
1.第一步,安装vue-lazyload
打开package.json,找到dependencies如下:
"dependencies": {"vue-lazyload": "^1.2.4"},
安装并重启服务
npm install
npm run dev
2.第二步,引入vue-lazyload并调用
打开main.js,通过import引入并调用传参(全局配置,也可在对应的.vue页面局部引用)
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {loading: require('common/image/default.png') //此图片路径为懒加载的默认图,小伙伴根据实际情况更改路径
})
3.第三步,在.vue页面适配懒加载
<img v-lazy="item.imgurl">
tips:背景图片也可以适用懒加载哦!