## Lazyload 图片懒加载 ### 使用指南 `Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。 ```js import Vue from 'vue'; import { Lazyload } from '@youzan/zanui-vue'; Vue.use(Lazyload, options); ``` ### 代码演示 #### 基础用法 比如商品详情页很多图片的情况需要对图片进行懒加载，只需将`v-lazy`指令的值设置为你需要懒加载的图片。 :::demo 基础用法 ```html

``` ::: #### 背景图懒加载 和图片懒加载不同的背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址。还有一个需要注意的是你需要设置容器的样式，否则高度不会撑开。 :::demo 背景图懒加载 ```html

``` ::: #### 懒加载模块 懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。 :::demo 懒加载模块 ```html

``` ::: ### Options | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | loading | 加载时的图片 | `string` | | | | error | 错误时的图片 | `string` | | | | preload | 预加载高度的比例 | `string` | | | | attempt | 尝试次数 | `number` | `3` | | | listenEvents | 监听的事件 | `Array` | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` | | | adapter | 适配器 | `Object` | | | | filter | 图片url过滤 | `Object` | | | | lazyComponent | 是否能懒加载模块 | `boolean` | `false` | |