oLoader使用方法
不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载jquery库,作者已经将两个插件集成到一起:jquery.oLoader.min.js,已经打包好请戳源码下载。 调用jQuery oLoader非常简单,一句话如下:
代码如下:
使用oLoader加载图片:
代码如下:
使用oLoader加载页面:
代码如下:
当然,它还提供了丰富的选项和回调函数,根据具体需求进行设置。
代码如下:
图片
style: 1,//loader样式
modal: true,//模态遮罩,如果为false,则不会显示遮罩层
fadeInTime: 300,//遮罩层淡入速度,毫秒
fadeOutTime: 300,//遮罩层谈出速度,毫秒
fadeLevel: 0.7,//遮罩层透明度,0-1
backgroundColor: '#000',//背景色
imageBgColor: '#fff',//loader动画图片背景
imagePadding: '10',
showOnInit: true,//初始化显示加载动画
hideAfter: 0,//time in ms
url: false,//Ajax调用参数,下同
type: 'GET',
data: false,
updateContent: true,//是否替换ajax返回内容
updateOnComplete: true,//是否立即替换服务器返回的内容
showLoader: true,//是否显示loader图片
effect: '',//动态效果,支持door,slide,doornslide
wholeWindow: false,//when true,oLoader covers the whole window
lockOverflow: false,//locks body's overflow while loading
waitLoad: false,//当元素内容加载完才显示内容
checkIntervalTime: 100,//interval which checks for position changes
//回调函数
complete: '',//当动画结束,内容加载完调用
onStart: '',//动画开始时调用
onError: '' //当ajax请求出错时调用
}
oPageLoader使用方法
oPageLoader可以实现漂亮的加载页面时的进度条动画,调用oPageLoader也非常简单,如下:
$(function(){
$.oPageLoader();
});
oPageLoader提供了丰富的选项和方法调用。
{
backgroundColor: '#000',//背景色
progressBarColor: '#f00',//进度条颜色
progressBarHeight: 3,//进度条高度
progressBarFadeLevel: 1,
showPercentage: true,
percentageColor: '#fff',
percentageFontSize: '30px',
context: 'body',
affectedElements: 'img,iframe,frame,script',
ownStyle: false,//如果设置为ture,则可自定义进度条样式
style: "
0%
",
lockOverflow: true,
images: [],//array of additional images,such as those from css files
wholeWindow: true,
fadeLevel: 1,
waitAfterEnd: 0,
fadeOutTime: 500,
//callbacks
complete: false,//当页面加载完动画结束时执行
completeLoad: false,//当页面已经加载不需要动画结束就执行
update: false
}
回调函数update,是当页面元素加载完时调用,返回data数据为: data.total:加载的元素总数。 data.loaded:已加载的元素。 data.percentage:百分比。 使用方法:
代码如下: