在vue中使用图片懒加载详细指南，分享给大家。具体如下：
说明
当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。
使用方式
使用vue的 vue-lazyload 插件
插件地址:https://www.npmjs.com/package/vue-lazyload
案例
demo： 懒加载案例demo
Installation 安装方式
npm
$ npm i vue-lazyload -D
CDN
CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
在Vue.js应用中，为了优化用户体验，特别是在处理大量图片或者网络环境较差时，可以采用图片懒加载技术。本文将详细讲解如何使用`vue-lazyload`插件来实现这一功能。
`vue-lazyload`是一个专门针对Vue.js设计的图片懒加载插件，它的主要作用是在图片实际进入视口之前，不进行网络请求，而是先显示一个预设的占位符，等到图片即将进入用户的可视区域时，再进行加载。这样可以显著减少页面初次加载的时间，提高页面性能，并且能节省用户流量。
**安装与引入**
要在Vue项目中使用`vue-lazyload`，首先需要通过npm进行安装：
```bash
npm install vue-lazyload --save-dev
```
如果你希望使用CDN，可以引用以下链接：
```html
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
```
在Vue应用的入口文件（通常是`main.js`）中，引入并使用插件：
```javascript
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
// 可选的配置项
})
```
**基本用法**
在Vue组件中，将`img`标签的`:src`属性替换为`v-lazy`指令，如：
```html
<div class="pic">
<a href="#">
<img v-lazy="'/static/img/' + item.productImage" alt="">
</a>
</div>
```
这里的`v-lazy`指令的值是图片的URL，它会告诉`vue-lazyload`何时加载图片。
**配置选项**
`vue-lazyload`提供了多种配置选项，以便根据项目需求进行定制：
1. `preLoad`：预加载比例，默认为1.3，表示在图片实际进入视口前的预加载高度。
2. `error`：加载失败时使用的占位图片URL。
3. `loading`：加载中时使用的占位图片URL。
4. `attempt`：加载尝试次数，如果超过此次数仍然加载失败，将使用`error`指定的图片。
5. `listenEvents`：监听的事件列表，用于判断图片是否进入视口，默认包括滚动、鼠标滚轮等事件。
6. `adapter`：允许动态修改元素属性的对象。
7. `filter`：图片监听或过滤器，用于自定义图片加载逻辑。
8. `lazyComponent`：是否开启组件懒加载，默认为false。
9. `dispatchEvent`：是否触发DOM事件，默认为false。
10. `throttleWait`：节流等待时间，单位为毫秒，默认200。
11. `observer`：是否使用Intersection Observer，如果浏览器支持，这是一个更高效的监听方法，默认为false。
12. `observerOptions`：Intersection Observer的配置项，如`rootMargin`和`threshold`。
例如，你可以这样配置：
```javascript
Vue.use(VueLazyload, {
preLoad: 1.5,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 2,
listenEvents: ['scroll'],
observer: true,
observerOptions: {
rootMargin: '0px',
threshold: 0.2
}
})
```
**事件监听**
除了上述配置项，还可以自定义监听事件，例如：
```javascript
Vue.use(VueLazyload, {
// ...
listenEvents: ['scroll', 'custom_event']
})
```
这会在监听到`scroll`和`custom_event`事件时检查图片是否进入视口。
总结来说，`vue-lazyload`为Vue项目提供了强大的图片懒加载功能，通过合理配置和使用，可以有效提升应用的性能和用户体验。同时，它还提供了丰富的扩展性，可以根据项目的具体需求进行定制，如添加自定义事件、使用Intersection Observer等。
