Lazy懒加载模块
Lazy懒加载模块是基于Spy模块的扩展,核心是使用IntersectionObserver这个原生API;支持对img、video、audio、iframe四种标签进行快捷懒加载;另外还支持对其他标签使用async异步加载,异步懒加载的核心是getContent和setContent两个函数。
单个图片
对单个图片使用lazy-src
属性,并将真实的图片地址写在该属性里即可。
使用异步模板
如果预料到异步请求到的数据是对象或数组,则需要使用lazy-tpl
属性附上解析模板。
实例化
使用lazy-*
属性方法创建懒加载是快捷写法,其原始写法是ax-lazy="content:''"
。
或者使用new
实例的方法创建懒加载。
-
-
-
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 |
{} |
异步请求配置 |
模板配置
属性 |
类型 |
默认值 |
说明 |
tplStr |
string |
'' |
模板字符串 |
tplEng |
function |
null |
模板引擎 |
监听配置
属性 |
类型 |
默认值 |
说明 |
spy |
object |
{} |
spy模块参数 |
回调函数
属性 |
类型 |
默认值 |
说明 |
onShown |
function |
null |
资源显示后回调 |