Custom Display Load Waiting Picture Plugin of loading.gif Implemented by JS

This article describes an JS implementation of a custom display load waiting picture plugin.Share it for your reference, as follows:

A problem was encountered at work -- a business process is divided into phases, each of which disappears if the load picture loading.gif file is displayed before the data is displayed.For this reason, I have written a method to facilitate the use of the whole project.

<button onclick="show()">show</button>
<button onclick="hide()">hide</button>
<script>
// Create Load Object 
var obj = new loadingImg();
// Show Loaded Pictures 
function show(){
  obj.show();
}
// Hide Loaded Pictures 
function hide(){
  obj.hide();
}
// Load Picture Method (Object) 
function loadingImg(mySetting){
  var that = this;
  if(mySetting == "" || mySetting == undefined || typeof mySetting != "object"){
    mySetting = {};
  }
  // Using timestamps as spatial ID
  var targetID = new Date().getTime();
  this.setting = {
    // Container for inserting pictures , Use jquery Query mode incoming parameters of 
    targetConater : "",
    // Address using picture 
    imgUrl : "../img/loading.gif",
    // Picture Displayed   width 
    imgWidth : "32px",
    // Default Style for Pictures 
    imgClass : "",
    // Generating control's ID
    "targetID" : targetID,
    // Show previous callback functions 
    beforeShow : function(plugin){
    },
    // Callback function after display 
    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;
  }
  // Display Control 
  this.show = function(){
    $("#" + that.setting.targetID).show();
  }
  // Hide Control 
  this.hide = function(){
    $("#" + that.setting.targetID).hide();
  }
  this.init = function(){
    // Execute callback function before display 
    if(typeof that.setting.beforeShow == "function"){
      that.setting.beforeShow(that);
    }
    // Variables holding strings 
    var targetHTML = '';
    // Store content in a specified container, default to body lowest level 
    if(that.setting.targetConater != "" && this.setting.targetConater != undefined){
      targetHTML = '<img src="' + that.setting.imgUrl + '" class="' + that.setting.imgClass + '" id="' + that.setting.targetID + '" style="display:none;">';
      $(that.setting.targetConater).html(targetHTML);
    }else{
      targetHTML = '<img src="' + that.setting.imgUrl + '" class="' + that.setting.imgClass + '">';
      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 if the user has customized the width of the picture 
    if(that.setting.imgWidth != "" && that.setting.imgWidth.indexOf("px")>0 ){
      $("#"+targetID).css("width",that.setting.imgWidth);
    }
    // Execute callback function after display 
    if(typeof that.setting.afterShow == "function"){
      that.setting.afterShow(that,targetID);
    }
  }
  this.init();
}
</script>

More readers interested in JavaScript-related content can view this site's topics: JavaScript Switching Special Effects and Techniques Summary, JavaScript Find Algorithmic Techniques Summary, JavaScript Animation Special Effects and Techniques Summary, JavaScript Errors and Debugging Techniques Summary, JavaScript Data Structure and Algorithmic Techniques Summary, etc.Summary of JavaScript Traversal Algorithms and Techniques and Summary of JavaScript Mathematical Operation Usage

I hope that the description in this paper will be helpful to everyone's JavaScript program design.