vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件

介绍： vue-lazyload主要应用于图片延迟加载。包含如下的特点：

• 小巧轻便，功能强大，易于使用
• 可以用于加载任何图像类型
• 支持Vue 1.0和Vue 2.0

理解图片延迟加载:

当某个网页中呈现的图片较多时，由于网络等原因，访问该网页时，所有的图片不会立马全部进行显示出来，会出现一定的网络延迟加载的现象，影响用户体验；但我们可以vue-lazyload插件来实现在图片加载的过程中，先显示出默认的加载图片，直到图片完全显示，默认图片消失，这样就会大大的提升用户体验。

使用方法如下：

1、通过npm安装

npm install vue-lazyload -s
复制代码

2、在main.js中进行引用

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预压高度的比例
  error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标
  loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标
  attempt: 1 // 图像尝试加载 次数
})

复制代码

3、在组件中使用

<img v-lazy="item.picUrl" alt="">

图片地址就是item.picUrl，一般写接口中拿到的图片地址变量