eric-lazyhtml

A lazy loading library of html elements for web development

Browser Support

| | | | | | --- | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |

Installing

Using npm:

$ npm install eric-lazyhtml

Using bower:

$ bower install eric-lazyhtml

Using yarn:

$ yarn add eric-lazyhtml

Using jsDelivr CDN:

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

Using unpkg CDN:

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

Example

note: Web usage

一个简单的示例是在你的页面上填充需要延迟加载的元素配置，使用JSON配置

<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>

lazyHtml API

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

使用建议

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

lazyhtml(jsonConfig)

参数说明

{
    "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)

参数说明：

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