# @zhinan-oppo/lazyload
> lazyload images and videos
Latest version **3.28.2** (published 2021-06-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install @zhinan-oppo/lazyload
pnpm add @zhinan-oppo/lazyload
yarn add @zhinan-oppo/lazyload
bun add @zhinan-oppo/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 | 3.28.2 |
| Published | 2021-06-05 |
| First published | 2020-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | xsfour |
| Maintainers | swaylq, bolinghh, hugojing, jiax, xsfour |
## Links
- npm: https://www.npmjs.com/package/@zhinan-oppo/lazyload
- Repository: https://github.com/zhinan-oppo/snowball
- Homepage: https://github.com/zhinan-oppo/snowball#readme
- Issues: https://github.com/zhinan-oppo/snowball/issues
- npm.io page: https://npm.io/package/@zhinan-oppo/lazyload
## Dependencies (1)
- [vanilla-lazyload](https://npm.io/package/vanilla-lazyload.md) ^15.2.0
## Recent versions
- 3.28.2 (latest) — 2021-06-05
- 3.22.0 — 2020-12-25
- 3.21.0 — 2020-12-17
- 3.20.0 — 2020-12-14
- 3.18.6-beta.1 — 2020-11-23
- 3.18.5 — 2020-10-28
- 3.18.4 — 2020-10-24
- 3.18.2 — 2020-10-23
- 3.15.0 — 2020-09-04
- 3.13.0 — 2020-08-28
- 3.0.0 — 2020-05-21
- 2.5.1 — 2020-05-21
- 2.3.0 — 2020-05-13
- 2.1.1 — 2020-05-11
- 2.1.0 — 2020-05-11
- … 17 more at https://npm.io/package/@zhinan-oppo/lazyload/versions
## README
# 懒加载
## Install
使用 yarn 安装
```
yarn add @zhinan-oppo/lazyload
```
CommonJS 引用方式
```
import { init } from '@zhinan-oppo/lazyload';
```
## Usage
### 默认配置
```typescript
interface MediaConfig {
attr: string; # 尺寸对应的属性名
start?: number; # 最小屏幕宽度，默认为 0
end?: number; # 最大屏幕宽度，默认为无限大
}
export interface LazyLoadConfig {
defaultURLAttr: string;
dstNameAttr: string;
loadedClassAttr: string;
eventFlag: string;
bgFlag: string;
loadEarlyFlag: string;
medias: MediaConfig[];
}
const config: LazyLoadConfig = {
defaultURLAttr: 'z-src',
dstNameAttr: 'z-dst',
loadedClassAttr: 'z-loaded-class',
eventFlag: 'z-event',
bgFlag: 'z-bg',
loadEarlyFlag: 'z-early',
medias: [
{
attr: 'z-src-mb',
start: 0,
end: 568,
},
{
attr: 'z-src-pc',
start: 569,
},
],
};
```
- `defaultURLAttr`: 默认的 URL 属性名，medias 中未定义相应的 attr 时使用该值，默认为`'z-src'`
- `dstNameAttr`: 默认给 element 添加 src 属性，通过 dstNameAttr 可以修改为其它属性
- dstNameAttr 默认为`'z-dst'`
- 例如，``会被加载为``
- `loadedClassAttr`: 通过该属性设置懒加载后添加的类名，可以通过`' '`隔开多个类名
- `eventFlag`: 通过该属性判断是否在懒加载完成后触发`lazy-loaded`事件，可以通过`element.addEventListener('lazy-loaded', ...)`监听
- `event.detail` 为实际 load 的`URL`
- 注意：如果添加了`z-early`，事件会在初始化的时候就 dispatch，在这之后添加的处理函数无法被触发
- `bgFlag`: 通过该属性判断是否设置为背景图片
- `loadEarlyFlag`: 通过该属性判断是否在**初始化时就加载**
- `medias`: 屏幕宽度查询条件
### 修改配置
```typescript
function configure(config: Partial): void;
```
### 根据配置通过 DOM 属性初始化 element
```typescript
function init(config?: Partial, root = window.document): void;
```
- 其中`init`相当于`configure(config)` + `initByAttributes(root)`
```typescript
import { init } from '@zhinan-oppo/lazyload';
document.addEventListener('DOMContentLoaded', event => {
init({
medias: [
{
attr: 'z-src-mb',
start: 0,
end: 568,
},
{
attr: 'z-src-pc',
start: 569,
},
],
});
});
```
### 原理
根据尺寸选择不同的标签值，在滚动过程中，加到`src`（或自定义）属性值里
### 默认配置下的使用示例
#### 基础使用
```html
```
#### 加载背景图片
```html
```
#### 在初始化时立即加载
```html
```
#### 将 url 加载到属性 href
```html
```
将得到
```html
```
#### 懒加载后添加`lazy-loaded`类名
```html
```
在懒加载后将得到
```html
```
#### 触发`lazy-loaded`事件
##### HTML
```html
```
##### js
```javascript
const element = document.getElementById('element');
element.addEventListener('lazy-loaded', event => {
console.log(`Loaded URL: ${event.detail}`);
event.preventDefault(); // 可以阻止 z-loaded-class 被添加
});
```
---
_Source: https://npm.io/package/@zhinan-oppo/lazyload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
![` - `loadedClassAttr`: 通过该属性设置懒加载后添加的类名，可以通过`' '`隔开多个类名 - `eventFlag`: 通过该属性判断是否在懒加载完成后触发`lazy-loaded`事件，可以通过`element.addEventListener('lazy-loaded', ...)`监听 - `event.detail` 为实际 load 的`URL` - 注意：如果添加了`z-early`，事件会在初始化的时候就 dispatch，在这之后添加的处理函数无法被触发 - `bgFlag`: 通过该属性判断是否设置为背景图片 - `loadEarlyFlag`: 通过该属性判断是否在**初始化时就加载** - `medias`: 屏幕宽度查询条件 ### 修改配置 ```typescript function configure(config: Partial): void; ``` ### 根据配置通过 DOM 属性初始化 element ```typescript function init(config?: Partial, root = window.document): void; ``` - 其中`init`相当于`configure(config)` + `initByAttributes(root)` ```typescript import { init } from '@zhinan-oppo/lazyload'; document.addEventListener('DOMContentLoaded', event => { init({ medias: [ { attr: 'z-src-mb', start: 0, end: 568, }, { attr: 'z-src-pc', start: 569, }, ], }); }); ``` ### 原理 根据尺寸选择不同的标签值，在滚动过程中，加到`src`（或自定义）属性值里 ### 默认配置下的使用示例 #### 基础使用 ```html ``` #### 加载背景图片 ```html ``` #### 在初始化时立即加载 ```html ``` #### 将 url 加载到属性 href ```html ``` 将得到 ```html ``` #### 懒加载后添加`lazy-loaded`类名 ```html ``` 在懒加载后将得到 ```html ``` #### 触发`lazy-loaded`事件 ##### HTML ```html ``` ##### js ```javascript const element = document.getElementById('element'); element.addEventListener('lazy-loaded', event => { console.log(`Loaded URL: ${event.detail}`); event.preventDefault(); // 可以阻止 z-loaded-class 被添加 }); ``` --- _Source: https://npm.io/package/@zhinan-oppo/lazyload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._](/path/to.png){kind=link}
