DIY博客园

 
$('#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           
  } 
}); 

附源码下载