# eric-lazyhtml

> A lazy loading library of html elements for web development

Latest version **1.0.3** (published 2022-08-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install eric-lazyhtml
pnpm add eric-lazyhtml
yarn add eric-lazyhtml
bun add eric-lazyhtml
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-08-09 |
| First published | 2022-08-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | eric.z.zhou@outlook.com |
| Maintainers | eric.zhou |
| Keywords | lazyhtml |

## Links

- npm: https://www.npmjs.com/package/eric-lazyhtml
- Repository: https://github.com/ericzzhou/lazyHtml
- Homepage: https://github.com/ericzzhou/lazyHtml#readme
- Issues: https://github.com/ericzzhou/lazyHtml/issues
- npm.io page: https://npm.io/package/eric-lazyhtml

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-08-09

## README

# eric-lazyhtml


A lazy loading library of html elements for web development

## Browser Support

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |



## Installing

Using npm:

```bash
$ npm install eric-lazyhtml
```

Using bower:

```bash
$ bower install eric-lazyhtml
```

Using yarn:

```bash
$ yarn add eric-lazyhtml
```

Using jsDelivr CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/eric-lazyhtml/dist/lazyhtml.min.js"></script>
```

Using unpkg CDN:

```html
<script src="https://unpkg.com/eric-lazyhtml/dist/lazyhtml.min.js"></script>
```

## Example

### note: Web usage
一个简单的示例是在你的页面上填充需要延迟加载的元素配置，使用JSON配置
```html
<div class="container loading" lazy style="--color:purple">
    <script type="application/json">
        {
            "method": "ajax",
            "target": "div > div.content",
            "response": {
                "method": "get",
                "type": "html",
                "url": "https://www.yamibuy.com/robots.txt",
                "headers": [],
                "body": ""
            }
        }
    </script>
    <div class="p">
        <div>这里组件原本的内容</div>
        <div class="content"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/eric-lazyhtml/dist/lazyhtml.min.js"></script>
<script>
    let lazyHtml = new LazyHtml('body', {
        distance: 50,
        attr: 'lazy',
        lazy: true,
        onLoad: function () {
            document.querySelectorAll('[lazy="loaded"]').forEach(function (item) {
                item.classList.remove('loading');
            });
            console.log('onLoad 回调执行', arguments);
        }
    });
    lazyHtml.init();
    </script>

```


```js

```

## lazyHtml API

lazyHtml 支持JSON配置，用来配置相关行为。

### 使用建议
- 在页面绘制需要延迟加载的元素容器（固定高度可以大幅度缓解CLS问题）
- 在元素上添加 lazy 属性，lazyhtml库将会监听设置了lazy属性的元素
- 在元素容器内部使用JSON配置需要请求的数据，以及远端数据返回后替换的页面元素
- 设置元素加载完成后的回调事件

##### lazyhtml(jsonConfig)
参数说明
```json
{
    "method": "ajax", // 表示发起ajax请求
    "target": "div > div.content", // ajax 结果写入的元素选择器，相对于当前容器
    "response": {
        "method": "get",  // ajax method
        "type": "html",  // ajax response content type
        "url": "https://www.yamibuy.com/robots.txt", // ajax url
        "headers": [], // ajax headers
        "body": "" // ajax post 时使用的body填充
    }
}
```
##### lazyhtml(config)



参数说明：
```js
distance: 50, // 控制元素加载时机，距离出现在屏幕视窗50px时加载
attr: 'lazy', //控制 lazyhtml 监听的元素属性
lazy: true, //
onLoad: function () { // lazyhtml 监听并成功执行数据填充后的回调函数
    document.querySelectorAll('[lazy="loaded"]').forEach(function (item) {
        item.classList.remove('loading');
    });
    console.log('onLoad 回调执行', arguments);
}
```


## License

[MIT](LICENSE)

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