JavaScript makes loading animation effect loading effect _javascript skill

Copy Code code as follows:

Delay wait Effect of/*ajax submission * *

var ajaxloding = new Object ();

Wraperid: container element showing loding picture
MS: Indicates the length of time that the loding icon displays, milliseconds
Envent: An event source object representing the starting event that is used to obtain the object of the starting event
Callback: Represents a fallback method that is performed after an animation has ended
The Stop () method represents the operation of a hidden animation that was performed after the callback method was executed successfully
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; Displays the parent element for 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 icons are centered and Lodingid displayed, and the following styles are 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:

Copy Code code as follows:

$ ("#elementid"). Click (function (e) {
var obj = new Ajaxloding.load ("Div_test", 2000,e,0,0,function () {
Alert ("Submit successfully!");
Obj.stop ()//Hide load icon
});
Obj.start ();
});

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