This article describes the custom display load waiting picture plugin implemented by JS. Share it for your reference, as follows:
I encountered a problem in my work - a business process is divided into several stages. If the data is not displayed in each stage, the loading image loading.gif file must be displayed before it is displayed, and if there is data, it will disappear. To this end, I wrote a method myself to facilitate the use of the entire project.
<button onclick="show()">show</button><button onclick="hide()">hide</button><script>//Create loading object var obj = new loadingImg();//Show loading image function show(){ obj.show();}//Hide loading image function hide(){ obj.hide();}//Loading image method (object) function loadingImg(mySetting){ var that = this; if(mySetting == "" || mySetting == undefined || typeof mySetting != "object"){ mySetting = {}; } //Use the time stamp as the ID of the space var targetID = new Date().getTime(); this.setting = { //Insert the container of the picture, pass the parameter targetConater using jquery query method : "", //Use the image address imgUrl : "../img/loading.gif", //The width of the image display imgWidth : "32px", //The default style of the image imgClass : "", //The ID of the generated control "targetID" : targetID, //The previous callback function beforeShow : function(plugin){ }, //The callback function afterShow : function(plugin,targetID){ } } this.setting = $.extend(this.setting, mySetting); //Get the width of the screen this.getScreenWidth = function(){ return document.documentElement.clientWidth; } //Get the height of the screen this.getScreenHeight = function (){ return document.documentElement.clientHeight; } //Show control this.show = function(){ $("#" + that.setting.targetID).show(); } //Hide the control this.hide = function(){ $("#" + that.setting.targetID).hide(); } this.init = function(){ //Show if(typeof that.setting.beforeShow == "function"){ that.setting.beforeShow(that); } //The variable var targetHTML = ''; //Storage the content in the specified container and store it at the bottom of the body by default if(that.setting.targetConater != "" && this.setting.targetConater != undefined){ targetHTML = '<img src="' + that.setting.imgUrl + '" id="' + that.setting.targetID + '" style="display:none;">'; $(that.setting.targetConater).html(targetHTML); }else{ targetHTML = '<img src="' + that.setting.imgUrl + '">'; targetHTML = '<div id="' + that.setting.targetID + '" style="display:none;position: absolute;top:50%;left: 50%;height: ' + that.getScreenHeight()+';width:'+that.getScreenWidth()+'">' + targetHTML + '</div>'; $("body").append(targetHTML); } //Determine whether the user has customized the width of the image if(that.setting.imgWidth != "" && that.setting.imgWidth.indexOf("px")>0 ){ $("#"+targetID).css("width", that.setting.imgWidth); } //Execute the callback function after displaying if(typeof that.setting.afterShow == "function"){ that.setting.afterShow(that,targetID); } } this.init();}</script>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.