快捷導航

javascript 通用loading動畫效果實例代碼

更新時間：2014年01月14日 14:42:35 作者：

這篇文章主要介紹了javascript 通用loading動畫效果實例代碼，有需要的朋友可以參考一下

由于項目中多處要給ajax提交的時候增加等待動畫效果，所以就寫了一個簡單的通用js方法；
代碼如下：

/*ajax提交的延時等待效果*/

var AjaxLoding = new Object();

//wraperid : 顯示loding圖片的容器元素
//ms：表示loding圖標顯示的時長，毫秒
//envent：表示出發(fā)事件的事件源對象，用于獲得出發(fā)事件的對象
//callback：表示動畫結(jié)束后執(zhí)行的回掉方法
//stop（）方法表示在回掉方法執(zhí)行成功后執(zhí)行的隱藏動畫的操作
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顯示，設(shè)置如下樣式
        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);
    }
};

調(diào)用方法：

復制代碼代碼如下:

$("#elementid").click(function (e) { 
  var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {
            //alert("提交成功!"); 
            obj.stop();//隱藏加載圖標
        });
  obj.start();
        });

我用的loding圖標，大家可以自行替換；