Lazy懒加载模块

2024-08-14 00:28:38首发，1个月前更新

Lazy懒加载模块是基于Spy模块的扩展，核心是使用IntersectionObserver这个原生API；支持对img、video、audio、iframe四种标签进行快捷懒加载；另外还支持对其他标签使用async异步加载，异步懒加载的核心是getContent和setContent两个函数。

Lazy懒加载模块 1个月前更新 ax.Lazy懒加载模块(class类)详细使用方法和诸多示例 需4金币 2个月前更新

单个图片

对单个图片使用lazy-src属性，并将真实的图片地址写在该属性里即可。

输出
HTML

```
                
                
            
```

使用异步模板

如果预料到异步请求到的数据是对象或数组，则需要使用lazy-tpl属性附上解析模板。

输出
HTML

请求一个对象

请求一个数组
```
                
                
            
```

实例化

使用lazy-*属性方法创建懒加载是快捷写法，其原始写法是ax-lazy="content:''"。

输出
HTML

```
                
                
            
```

或者使用new实例的方法创建懒加载。

输出
HTML
JS

```
                
                
            
```

                
                new ax.Lazy('#demo01',{
                    content:'https://unpkg.com/@codady/resource/image/earth09.jpg'
                });

基础配置

属性	类型	默认值	说明
root	string/null	null	参照父容器选择器
type	'src'/'async'	'src'	懒加载类型
hyphen	string	','	数据连接符

数据源配置

属性	类型	默认值	说明
content	string	''	数据源内容
contType	'text'/'image'/'video'/'audio'/'iframe'/'async'/'html'/'form'/'auto'	'text'	内容类型
contData	object	{}	请求数据参数
ajax	object	{}	异步请求配置