JavaScript ユニバーサルローディングアニメーション効果の例 code_javascript スキル

Ajax を送信するときに、プロジェクト内の多くの場所で待機アニメーション効果を追加する必要があるため、単純な一般的な JS メソッドを作成しました。
コードは次のとおりです。

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

/*ajax 送信の遅延待機効果*/

var AjaxLoding = new Object();

//wraperid: 読み込みイメージを表示するコンテナ要素
//ms: 読み込みアイコンの表示時間をミリ秒で示します
//envent: 起動イベントのイベント ソース オブジェクトを表します。起動イベントのオブジェクトを取得します
//callback: アニメーション終了後に実行されるコールバックメソッドを示します
//stop() メソッドは、コールバックメソッドが正常に実行された後に実行されるアニメーションを非表示にする操作を示します
AjaxLoding.load = function(lodingid, ms,event,left,top,callback){

if (!left || typeof left == 未定義)
left = 0;
if (!トップ || トップのタイプ == 未定義 )
トップ = 0;

this.lodingid = lodingid; //loding アイコンの親要素を表示
this.obj = $("#" this.lodingid);
this.sourceEventElement=$(event.currentTarget);
this.start = function () {
this.obj.css({positin:"relative"});
this.sourceEventElement.attr("disabled",true);
//デフォルトでは、アイコンは lodingid で中央に表示されます。次のスタイルを設定します。
var imgobj = $("");
imgobj.css({ left: this.obj.width() / 2-imgobj.width()/2-left、top: this.obj. height() / 2- imgobj.height()/2-top });
imgobj.appendTo(this.obj);
this.obj.animate({height:this.obj.height()} , ms, function () {
callback();
});
}
};

メソッドの呼び出し:

コードをコピー

コードは次のとおりです:$(" #elementId "）.click（function（e）{var obj = new ajaxloding.load（" div_test "、2000、e、0,0、function（）{

私が使用したロードアイコンはあなたが置き換えることができます

実装は非常に単純ですが、パフォーマンスや標準などを考慮していません。まだ不完全な点が多く、より良いコミュニケーションが望まれます。