Javascript to animate the loading effect
- 2020-03-30 01:22:02
- OfStack
var AjaxLoding = new Object();
//Wraperid: container element that displays loding images
//Ms: represents how long the loding icon is displayed in milliseconds
//Envent: represents the event source object for the originating event, used to obtain the originating event object
//Callback: represents a callback method that is executed after the animation is completed
//The stop () method represents the operation to hide the animation after the successful execution of the callback method
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 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 with the lodingid, and the following style is set
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);
}
};
Call method:
$("#elementid").click(function (e) {
var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {
//Alert (" submission successful!" );
obj.stop();//Hidden load icon
});
obj.start();
});
< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201401/131415595482666666.gif? 201401416130"> "this is the loding icon that I used, and you can replace it.