「VUE架构」VUE2.0 图片懒加载vue-lazyload

本文主要介绍图片懒加载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：背景图片也可以适用懒加载哦！