jQuery oLoader实现的加载图片和页面效果

oLoader使用方法
不管是oLoader还是oPageLoader都是基于jQuery，所以调用前请先加载jquery库，作者已经将两个插件集成到一起：jquery.oLoader.min.js，已经打包好请戳源码下载。
调用jQuery oLoader非常简单，一句话如下：
复制代码代码如下:
$（"#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, //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: "<div id="ownage_page_loader_text">0%</div><div id="ownage_page_loader"></div>",
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：百分比。
使用方法：
复制代码代码如下:
$.oPageLoader（{
update: function（data） {
    //here you can work
    //with data.percentage
    //     data.loaded
    //     data.total
}
}）;

以上就是本文给大家分享的jQuery oLoader插件的使用方法，希望大家能够喜欢。