lazyload : 懒加载工具
示例
介绍
页面中DOM结构或图片懒加载,提高页面性能,此组件需要跟scroller组件配合使用
使用方法
//1、图片懒加载:将页面上的标签的src属性名以"data-lazyload-src"代替 //2、Dom懒加载:将需要被懒加载的DOM放到 class为"lazyload-textarea"的'<textarea>'中,textarea的样式需要自行定义,设置class名称为lazyload-textarea .lazyload-textarea{ visibility: hidden; height: 0; width: 0; padding: 0; border: none; margin: 0; } define(['util/lazyload/1.0','fui/scroller/1.0'], function(LazyLoad,Scroller) { var myScroll = new Scroller({ container: '#xxx', checkDOMChanges:true }); var lazy = new LazyLoad({ container:'#wrapper', scroller:myScroll, threshold:500 }); })
配置参数
配置参数 | 参数类型/可选值 | 参数默认值 | 作用说明 |
---|---|---|---|
scroller | object:必选 | null | 懒加载区域所在的scroller对象 |
container | String: | 'body' | 懒加载区域的根节点选择器 |
autoLoad | boolean | true | 当new出组件的实例时,是否立即执行懒加载机制,默认为true,当设置为false时,需要调用接口.start()来启动 |
threshold | number | 200 | 阈值,懒加载的元素到可视区域的距离,当小于这个距离时,立刻加载 |
公共方法
方法名称 | 入参说明 | 返回值 | 作用说明 |
---|---|---|---|
start() | / | / | 开始执行加载,使用场景: 1.当autoLoad配置为false时,需要调用此方法启动 2.当需要懒加载的元素的位置发生变化时(不是由window的resize和scroll引起的变化,比如查询区域折叠起来导致下面的元素上移),调用此接口手动执行加载 3.暂停后需要调用此方法重新启动 |
pause() | / | / | 暂停监控懒加载,使用场景:当需要懒加载的区域不可见时,此时监控它属于性能浪费,应该暂停监控 |
isPause() | / | boolean | 判断是否暂停监控 |
addCallBack(selector,callback) || addCallBack({"xx":fn,...}]) |
单个添加回调时,两个参数:selector懒加载元素的选择器,callback,当元素曝光时回调方法 同时添加多个时格式为{"选择器":"回调方法","选择器":"回调方法"..} |
/ | 当元素加载时,回调的方法,一般讲autoLoad设置为false,在start()之前添加回调方法 |
collectResouce($html) | 一段HTML文本的jQuery对象,例如 $('') | / | 此方法的场景一般为当异步加载了DOM时,对异步加载的部分收集懒加载的资源 |