Vue-Lazyload实现图片懒加载

1. 安装 npm i vue-lazyload -S
2. 在main.js引入

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: '@/assets/images/error.png', //请求失败后显示的图片
  loading: '@/assets/images/loading.gif', //加载时图片
  attempt: 1, //尝试次数
})

3. 使用

• 将img标签的：src替换成v-lazy, 添加:key，当页面刷新时图片也会跟着刷新，避免页面刷新图片不更新情况

<img :src="require('@/assets/images/close/01_2.png')" :key="@/assets/images/close/01_2.png"> 

替换成

<img v-lazy="require('@/assets/images/close/01_2.png')" :key="@/assets/images/close/01_2.png">

• 作为背景图片使用

  <div v-lazy:background-image="require('@/assets/images/close/01_2.png')"></div>