jQuery oLoader_jquery によって実装された画像とページ効果の読み込み

oLoader の使用方法

oLoader と oPageLoader は両方とも jQuery に基づいているため、呼び出す前に jquery ライブラリをロードしてください: jquery.oLoader.min.js がパッケージ化されています。ダウンロードするコード。
jQuery oLoader の呼び出しは次のように非常に簡単です:

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

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

oLoader を使用して画像をロードします:

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

$(関数(){
$('img').oLoader({
WaitLoad: true、
fadeLevel: 0.9、
背景色: '#fff'、
スタイル:0、
画像: 'loader.gif'
});
});

oLoader を使用してページをロードします:

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

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

もちろん、特定のニーズに応じて設定できる豊富なオプションとコールバック関数も提供します。

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

{
image: 'images/loader.gif', //アニメーション画像を読み込みます
style: 1, //ローダースタイル
modal: true, //モーダルマスク、falseの場合、マスクレイヤーは表示されません
fadeInTime: 300, //マスクレイヤーのフェードイン速度、ミリ秒
fadeOutTime: 300, // マスクレイヤーのフェードアウト速度、ミリ秒
fadeLevel: 0.7, //マスクレイヤーの透明度、0-1
backgroundColor: '#000', //背景色
imageBgColor: '#fff', //ローダーアニメーション画像の背景
imagePadding: '10'、
showOnInit: true, //表示読み込みアニメーションを初期化します
HideAfter: 0, //ミリ秒単位の時間
url: false, //Ajax 呼び出しパラメータ、以下同様
入力: 'GET'、
データ: false、
updateContent: true, //ajax によって返されたコンテンツを置き換えるかどうか
updateOnComplete: true,//サーバーから返されたコンテンツをすぐに置き換えるかどうか
showLoader: true, //ローダー画像を表示するかどうか
エフェクト: '', //ダイナミックエフェクト、ドア、スライド、ドアンスライドをサポート
WholeWindow: false, //true の場合、oLoader はウィンドウ全体をカバーします
lockOverflow: false, //ロード中の本体のオーバーフローをロックします
waitLoad: false, //要素のコンテンツがロードされたときにコンテンツを表示します
checkIntervalTime: 100, //位置の変更をチェックする間隔
//コールバック関数
complete: '', //アニメーションが終了し、コンテンツがロードされたときに呼び出します
onStart: '', //アニメーションの開始時に呼び出されます
onError: '' //Ajaxリクエストエラーが発生したときに呼び出されます
}
oPageLoader
の使用方法 oPageLoader は、ページの読み込み時に美しいプログレス バー アニメーションを実現できます。oPageLoader の呼び出しも次のように非常に簡単です。 $(関数(){
$.oPageLoader(); });
oPageLoader は、豊富なオプションとメソッド呼び出しを提供します。
{
backgroundColor: '#000', //背景色
progressBarColor: '#f00', //プログレスバーの色
progressBarHeight: 3, //プログレスバーの高さ
progressBarFadeLevel: 1、
showPercentage: true、
パーセントカラー: '#fff'、
パーセントフォントサイズ: '30px'、
コンテキスト: '本文'、
影響を受ける要素: 'img,iframe,frame,script',
ownStyle: false, // true に設定すると、進行状況バーのスタイルをカスタマイズできます
スタイル: "

0%

",
lockOverflow: true、
画像: [], //CSS ファイルからの画像などの追加画像の配列
ウィンドウ全体: true、
フェードレベル: 1、
waitAfterEnd: 0、
フェードアウト時間: 500、
//コールバック
complete: false, //ページがロードされアニメーションが終了したときに実行
completeLoad: false, //ページがロードされ、アニメーションを終了する必要がないときに実行します
更新: false
}

The callback function update is called when the page elements are loaded. The returned data is:
data.total: Total number of elements loaded.
data.loaded: loaded element.
data.percentage: Percentage.
How to use:

Copy code The code is as follows:

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

The above is how to use the jQuery oLoader plug-in shared with you in this article. I hope you will like it.