Javascript common loading animation effect instance code

  • 2020-03-30 01:22:15
  • OfStack

Since there are many points in the project where waiting animation is added when ajax is submitted, a simple generic js method is written.
The code is as follows:

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.start = function () {
        //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 });
        this.obj.animate({height:this.obj.height()}, ms, function () {
    this.stop = function () { 
        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

< img SRC = "/ /" border = 0 > I use loding icon, you can replace itself;

The implementation is simple, with no performance, standards or anything else in mind. There are still many imperfections, there are better welcome exchanges;

Related articles: