$('#element').oLoader();

$(function(){
  $('img').oLoader({
    waitLoad: true,
    fadeLevel: 0.9,
    backgroundColor: '#fff',
    style:0,
    image: 'loader.gif'
  });
});

$('#ajax').oLoader({
  url: 'test.html',
  updateOnComplete: false
});

{
  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
}

$.oPageLoader({
  update: function(data) {
    //here you can work
    //with data.percentage
    //     data.loaded
    //     data.total          
  }
});