Vue-lazyload实现图片懒加载

前端多半是和页面打交道，我们在进行页面的展示的时候，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，
等到滚动到可视区域后再去加载。即需要使用到vue-lazyload插件，这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

那么vue-lazyload是如何使用的呢？

1.首页我们需要在终端安装该插件

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'

3.直接使用或者可以添加一些自定义选项使用，如（加载失败显示什么图片，未加载出来时显示什么图片）

3.1直接使用

Vue.use(VueLazyload)

3.2自定义使用

//使用图片懒加载插件
Vue.use(VueLazyLoad,{
  //占位符图片
  loading: require('./assets/img/load.png')
　　//加载错误时图片
  error: require('img/error.png')  //加载失败图片
});

 

4.修改图片显示方式为懒加载

将:scr修改为v-lazy

<img v-lazy="showImg" alt="" @load="itemLoad">
//加载图片

computed:{

    showImg() {

      return this.goodsItem.img || this.goodsItem.image || this.goodsItem.show.img 

    }

  }

下面附上自定义选项的参数图

至此，一个简单的图片懒加载就完成啦…