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时,对异步加载的部分收集懒加载的资源