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: "

0%

",
  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.total: ロードされた要素の合計数。
data.loaded: ロードされた要素。
data.percentage: パーセンテージ。
使用方法:

コードをコピーします コードは次のとおりです:

$.oPageLoader({
更新: 関数(データ) {
// ここで作業できます
//data.percentage 付き
// // data.loaded
// data.total
}
});

上記は、この記事で共有した jQuery oLoader プラグインの使用方法です。気に入っていただければ幸いです。