使用vue-lazyload实现图片懒加载

Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。Vue-lazyload是Vue的一个插件，用于延迟加载图像。

使用vue-lazyload实现图片懒加载的步骤如下：

1. 安装vue-lazyload插件

使用npm安装：

npm install vue-lazyload --save

2. 引入vue-lazyload插件

在main.js中引入：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

3. 在模板中使用vue-lazyload指令

<template>
  <div>
    <img v-lazy="imgUrl">
  </div>
</template>

其中，`v-lazy`指令用于延迟加载图像。`imgUrl`是图像的URL。

4. 可选：设置默认占位图

您可以设置图像未加载时显示的默认占位图像：

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

其中，`loading`属性指定了默认占位图像。

Vue-lazyload还支持其他选项，如预加载距离、错误图像和重试次数。详细信息请参见[官方文档](https://www.npmjs.com/package/vue-lazyload)。