Javascript-based loading animation effect-loading effect-javascript skills

In the project, we need to add the waiting animation effect when submitting the ajax request. Therefore, we have written a simple general js method. For details, refer to and use it. The Code is as follows:

/* Latency wait result of ajax submission */

Var AjaxLoding = new Object ();

// Wraperid: Container element for displaying loding Images
// Ms: The length of time displayed by the loding icon, in milliseconds
// Envent: indicates the event source object of the departure event. It is used to obtain the object of the departure event.
// Callback: indicates the method for executing the callback after the animation ends.
// The stop () method indicates the operation of hiding an animation after the 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 );
// By default, the icon is centered and the lodingid is displayed. The following style is set:
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 ();
});
};
This. stop = function (){
$ ("# Img_loding"). remove ();
This. sourceEventElement. attr ("disabled", false );
}
};

Call method:

The Code is as follows:

$ ("# Elementid"). click (function (e ){
Var obj = new AjaxLoding. load ("p_test", 2000, e, function (){
// Alert ("submitted successfully! ");
Obj. stop (); // hide the loading icon
});
Obj. start ();
});

This is the loding icon I used. You can replace it by yourself.