vue-lazyload具体用法

vue-lazyload 是一个常用的 Vue 图片懒加载插件，用于在滚动时延迟加载图片，提升页面加载速度和用户体验。下面是 vue-lazyload 的具体用法：

1. 安装 vue-lazyload

在项目目录下运行以下命令安装 vue-lazyload：

   npm install vue-lazyload --save

2. 引入并使用 vue-lazyload 插件

在 main.js（或者你的入口文件）中引入并使用 vue-lazyload：

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

   Vue.use(VueLazyload);

3. 配置 vue-lazyload

在 main.js 中配置 vue-lazyload，你可以设置一些全局的参数，比如加载时的占位图、错误时的占位图等。例如：

   Vue.use(VueLazyload, {
     preLoad: 1, // 预加载高度的比例，默认为 1.3
     error: 'img/error.jpg', // 加载错误时显示的占位图
     loading: 'img/loading.gif', // 加载中显示的占位图
     attempt: 3 // 加载失败后的重试次数，默认为 3
   });

4. 使用懒加载组件

在你的 Vue 组件模板中使用懒加载组件，将需要懒加载的图片 URL 绑定到 `v-lazy` 指令上。例如：

   <template>
     <div>
       <img v-lazy="imageUrl" alt="lazy image" />
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         imageUrl: 'path/to/image.jpg'
       };
     }
   };
   </script>

当滚动到该图片位置时，vue-lazyload 将自动加载图片。

以上就是使用 vue-lazyload 实现图片懒加载的基本步骤。你可以根据需要进行配置和调整，以满足你的具体需求。