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'
                    });
                    
                

基础配置

属性 类型 默认值 说明
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 资源显示后回调