Javascript creates loading animation effect loading effect_javascript skills

Copy code The code is as follows:

/*Delayed waiting effect of ajax submission*/

var AjaxLoding = new Object();

//wraperid: Container element that displays the loding image
//ms: Indicates the duration of the loding icon display, milliseconds
//envent: Represents the event source object of the launching event, used to obtain the object of the launching event
//callback: Indicates the callback method executed after the animation ends
//stop() method indicates the operation of hiding the animation executed after the callback method is successfully executed
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; //Display the parent element of the loding icon
this.obj = $("#" this.lodingid);
this.sourceEventElement=$(event.currentTarget);
this.start = function () {
　this.obj.css({positin:"relative"});
this.sourceEventElement.attr("disabled",true);
//Default will The icon is centered and displayed with lodingid. Set the following style
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();
       }); sourceEventElement.attr("disabled", false);
}
};

Calling method:

Copy code

The code is as follows:$("#elementid" ).click(function (e) { var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {

                                                                                                                                    

                                                                                                                                                                                    

This is the loding icon I use, you can replace it yourself.