複製代碼代碼如下:
/*ajax提交的延時等待效果*/
var AjaxLoding = new Object();
//wraperid : 顯示loding圖片的容器元素
//ms：表示loding圖標顯示的時長，毫秒
//envent：表示出發事件的事件源對象，用於獲得出發事件的對象
//callback：表示動畫結束後執行的回掉方法
//stop（）方法表示在回掉方法執行成功後執行的隱藏動畫的操作
AjaxLoding.load = function(lodingid,ms,event,left,top,callback){
if (!left || typeof left == undefined)
left = 0;
if (!top || typeof top == undefined)
top = 0;
this.lodingid = lodingid; //顯示loding圖標的parent元素
this.obj = $("#" + this.lodingid);
this.sourceEventElement=$(event.currentTarget);
this.start = function () {
this.obj.css({positin:"relative"});
this.sourceEventElement.attr("disabled",true);
//默認將圖標居中與lodingid顯示，設置如下樣式
var imgobj = $("<img src='/images/loaderc.gif' style='position:absolute; width:32px; height:32px;' id='img_loding'/>");
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();
});
};
this.stop = function () {
$("#img_loding").remove();
this.sourceEventElement.attr("disabled", false);
}
};
調用方法：
複製代碼代碼如下:
$("#elementid").click(function (e) {
var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {
//alert("提交成功!");
obj.stop();//隱藏加載圖標
});
obj.start();
});
這是我用的loding圖標，大家可以自行替換。