Lazy懒加载模块
Lazy懒加载模块是基于Spy模块的扩展,核心是使用IntersectionObserver这个原生API;支持对img、video、audio、iframe四种标签进行快捷懒加载;另外还支持对其他标签使用async异步加载,异步懒加载的核心是getContent和setContent两个函数。
单个图片
对单个图片使用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' });