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