图片懒加载

为什么需要图片懒加载

• 简而言之就是为了提高前端性能。
• 图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，提高用户体验。

图片懒加载的使用

①npm安装

npm install vue-lazyload -S

②安装图片懒加载插件

// main.js
import VueLazyLoad from 'vue-lazyload'
import Vue from 'vue'

// 安装图片懒加载插件
Vue.use(VueLazyLoad, {
  // 选择传入的配置
  //loading：图片在加载中时
  loading: require('./assets/img/common/图片3.png')
  //error：图片加载失败时
  error: require('./assets/img/common/图片4.png')
})

③修改需要懒加载的图片img :src -> img v-lazy

<img v-lazy="showImage" alt="">