jQuery oLoader实现的加载图片和页面效果
oLoader使用方法
不管是oLoader还是oPageLoader都是基于jQuery，所以调用前请先加载jquery库，作者已经将两个插件集成到一起：jquery.oLoader.min.js，已经打包好请戳源码下载。
调用jQueryoLoader非常简单，一句话如下：
$('#element').oLoader();
使用oLoader加载图片：
$(function(){
$('img').oLoader({
waitLoad:true,
fadeLevel:0.9,
backgroundColor:'#fff',
style:0,
image:'loader.gif'
});
});
使用oLoader加载页面：
$('#ajax').oLoader({
url:'test.html',
updateOnComplete:false
});
当然，它还提供了丰富的选项和回调函数，根据具体需求进行设置。
{
image:'images/loader.gif', //加载动画图片
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,//timeinms
url:false,//Ajax调用参数，下同
type:'GET',
data:false,
updateContent:true,//是否替换ajax返回内容
updateOnComplete:true,//是否立即替换服务器返回的内容
showLoader:true,//是否显示loader图片
effect:'',//动态效果，支持door,slide,doornslide
wholeWindow:false,//whentrue,oLoadercoversthewholewindow
lockOverflow:false,//locksbody'soverflowwhileloading
waitLoad:false,//当元素内容加载完才显示内容
checkIntervalTime:100,//intervalwhichchecksforpositionchanges
//回调函数
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:"<divid='ownage_page_loader_text'>0%</div><divid='ownage_page_loader'></div>",
lockOverflow:true,
images:[],//arrayofadditionalimages,suchasthosefromcssfiles
wholeWindow:true,
fadeLevel:1,
waitAfterEnd:0,
fadeOutTime:500,
//callbacks
complete:false,//当页面加载完动画结束时执行
completeLoad:false,//当页面已经加载不需要动画结束就执行
update:false
}
回调函数update，是当页面元素加载完时调用，返回data数据为：
data.total：加载的元素总数。
data.loaded：已加载的元素。
data.percentage：百分比。
使用方法：
$.oPageLoader({
update:function(data){
//hereyoucanwork
//withdata.percentage
// data.loaded
// data.total
}
});
以上就是本文给大家分享的jQueryoLoader插件的使用方法，希望大家能够喜欢。