oLoader使用方法
不管是oLoader還是oPageLoader都是基于jQuery，所以調(diào)用前請(qǐng)先加載jquery庫(kù)，作者已經(jīng)將兩個(gè)插件集成到一起：jquery.oLoader.min.js，已經(jīng)打包好請(qǐng)戳源碼下載。
調(diào)用jQuery oLoader非常簡(jiǎn)單，一句話如下：
復(fù)制代碼代碼如下:
$('#element').oLoader();
使用oLoader加載圖片：
復(fù)制代碼代碼如下:
$(function(){
$('img').oLoader({
waitLoad: true,
fadeLevel: 0.9,
backgroundColor: '#fff',
style:0,
image: 'loader.gif'
});
});
使用oLoader加載頁(yè)面：
復(fù)制代碼代碼如下:
$('#ajax').oLoader({
url: 'test.html',
updateOnComplete: false
});
當(dāng)然，它還提供了豐富的選項(xiàng)和回調(diào)函數(shù)，根據(jù)具體需求進(jìn)行設(shè)置。
復(fù)制代碼代碼如下:
{
image: 'images/loader.gif', //加載動(dòng)畫(huà)圖片
style: 1, //loader樣式
modal: true, //模態(tài)遮罩，如果為false，則不會(huì)顯示遮罩層
fadeInTime: 300, //遮罩層淡入速度，毫秒
fadeOutTime: 300, //遮罩層談出速度，毫秒
fadeLevel: 0.7, //遮罩層透明度，0-1
backgroundColor: '#000', //背景色
imageBgColor: '#fff', //loader動(dòng)畫(huà)圖片背景
imagePadding: '10',
showOnInit: true, //初始化顯示加載動(dòng)畫(huà)
hideAfter: 0, //time in ms
url: false, //Ajax調(diào)用參數(shù)，下同
type: 'GET',
data: false,
updateContent: true, //是否替換ajax返回內(nèi)容
updateOnComplete: true,//是否立即替換服務(wù)器返回的內(nèi)容
showLoader: true, //是否顯示loader圖片
effect: '', //動(dòng)態(tài)效果，支持door,slide,doornslide
wholeWindow: false, //when true, oLoader covers the whole window
lockOverflow: false, //locks body's overflow while loading
waitLoad: false, //當(dāng)元素內(nèi)容加載完才顯示內(nèi)容
checkIntervalTime: 100, //interval which checks for position changes
//回調(diào)函數(shù)
complete: '', //當(dāng)動(dòng)畫(huà)結(jié)束，內(nèi)容加載完調(diào)用
onStart: '', //動(dòng)畫(huà)開(kāi)始時(shí)調(diào)用
onError: '' //當(dāng)ajax請(qǐng)求出錯(cuò)時(shí)調(diào)用
}
oPageLoader使用方法
oPageLoader可以實(shí)現(xiàn)漂亮的加載頁(yè)面時(shí)的進(jìn)度條動(dòng)畫(huà)，調(diào)用oPageLoader也非常簡(jiǎn)單，如下：
$(function(){
$.oPageLoader();
});
oPageLoader提供了豐富的選項(xiàng)和方法調(diào)用。
{
backgroundColor: '#000', //背景色
progressBarColor: '#f00', //進(jìn)度條顏色
progressBarHeight: 3, //進(jìn)度條高度
progressBarFadeLevel: 1,
showPercentage: true,
percentageColor: '#fff',
percentageFontSize: '30px',
context: 'body',
affectedElements: 'img,iframe,frame,script',
ownStyle: false, //如果設(shè)置為ture，則可自定義進(jìn)度條樣式
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, //當(dāng)頁(yè)面加載完動(dòng)畫(huà)結(jié)束時(shí)執(zhí)行
completeLoad: false, //當(dāng)頁(yè)面已經(jīng)加載不需要?jiǎng)赢?huà)結(jié)束就執(zhí)行
update: false
}
回調(diào)函數(shù)update，是當(dāng)頁(yè)面元素加載完時(shí)調(diào)用，返回data數(shù)據(jù)為：
data.total：加載的元素總數(shù)。
data.loaded：已加載的元素。
data.percentage：百分比。
使用方法：
復(fù)制代碼代碼如下:
$.oPageLoader({
update: function(data) {
//here you can work
//with data.percentage
// data.loaded
// data.total
}
});
以上就是本文給大家分享的jQuery oLoader插件的使用方法，希望大家能夠喜歡。
