# @ophiuchus/lazyload

> ### 引入

Latest version **1.0.1** (published 2021-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ophiuchus/lazyload
pnpm add @ophiuchus/lazyload
yarn add @ophiuchus/lazyload
bun add @ophiuchus/lazyload
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-09-26 |
| First published | 2021-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 43.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | songbug1024 |
| Maintainers | songbug1024 |
| Keywords | ui, vue, frontend, component, ophiuchus, vant, vite |

## Links

- npm: https://www.npmjs.com/package/@ophiuchus/lazyload
- Homepage: https://github.com/songbug1024/ophiuchus
- Issues: https://github.com/songbug1024/ophiuchus/issues
- npm.io page: https://npm.io/package/@ophiuchus/lazyload

## Dependencies (1)

- [vue-lazyload](https://npm.io/package/vue-lazyload.md) ^1.2.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-09-26
- 1.0.0 — 2021-08-29

## README

# Lazyload 懒加载

### 引入

`Lazyload` 是 `Vue` 指令，使用前需要对指令进行注册。

```js
import Vue from 'vue';
import Lazyload from '@ophiuchus/lazyload';

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});
```

## 代码演示

### 基础用法

将 `v-lazy` 指令的值设置为你需要懒加载的图片。

```html
<img v-for="img in imageList" v-lazy="img" />
```

```js
export default {
  data() {
    return {
      imageList: [
        'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
        'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
      ],
    };
  },
};
```

### 背景图懒加载

和图片懒加载不同，背景图懒加载需要使用 `v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。

```html
<div v-for="img in imageList" v-lazy:background-image="img" />
```

### 组件懒加载

将需要懒加载的组件放在 `lazy-component` 标签中，即可实现组件懒加载。

```js
// 注册时设置`lazyComponent`选项
Vue.use(Lazyload, {
  lazyComponent: true,
});
```

```html
<lazy-component>
  <img v-for="img in imageList" v-lazy="img" />
</lazy-component>
```

## API

### Options

| 参数          | 说明             | 类型       | 默认值     |
| ------------- | ---------------- | ---------- | ---------- |
| loading       | 加载时的图片     | _string_   | -          |
| error         | 错误时的图片     | _string_   | -          |
| preload       | 预加载高度的比例 | _string_   | -          |
| attempt       | 尝试次数         | _number_   | `3`        |
| listenEvents  | 监听的事件       | _string[]_ | `scroll`等 |
| adapter       | 适配器           | _object_   | -          |
| filter        | 图片 URL 过滤    | _object_   | -          |
| lazyComponent | 是否能懒加载模块 | _boolean_  | `false`    |

> 更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)

---
_Source: https://npm.io/package/@ophiuchus/lazyload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._