DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery oLoader實現的加載圖片和頁面效果
jQuery oLoader實現的加載圖片和頁面效果
編輯:JQuery特效代碼     

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插件的使用方法,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved