本文實(shí)例講述了JS實(shí)現(xiàn)的自定義顯示加載等待圖片插件。分享給大家供大家參考，具體如下：

在工作中遇到了一個(gè)問題 —— 某個(gè)業(yè)務(wù)流程分為幾個(gè)階段，每個(gè)階段如果在數(shù)據(jù)沒有顯示出來之前就要顯示加載圖片loading.gif文件，如果有數(shù)據(jù)了就消失。為此，自己寫了一個(gè)方法，方便整個(gè)工程使用。

show

hide

//創(chuàng)建加載對(duì)象

var obj = new loadingImg();

//顯示加載圖片

function show(){

obj.show();

}

//隱藏加載圖片

function hide(){

obj.hide();

}

//加載圖片方法(對(duì)象)

function loadingImg(mySetting){

var that = this;

if(mySetting == "" || mySetting == undefined || typeof mySetting != "object"){

mySetting = {};

}

//使用時(shí)間戳作為空間的ID

var targetID = new Date().getTime();

this.setting = {

//插入圖片的容器,使用jquery的查詢方式傳入?yún)?shù)

targetConater : "",

//使用圖片的地址

imgUrl : "../img/loading.gif",

//圖片顯示的 寬度

imgWidth : "32px",

//圖片的默認(rèn)樣式

imgClass : "",

//生成控件的ID

"targetID" : targetID,

//顯示之前的回調(diào)函數(shù)

beforeShow : function(plugin){

},

//顯示之后的回調(diào)函數(shù)

afterShow : function(plugin,targetID){

}

}

this.setting = $.extend(this.setting, mySetting);

//獲取屏幕的寬度

this.getScreenWidth = function(){

return document.documentElement.clientWidth;

}

//獲取屏幕的高度

this.getScreenHeight = function (){

return document.documentElement.clientHeight;

}

//顯示控件

this.show = function(){

$("#" + that.setting.targetID).show();

}

//隱藏控件

this.hide = function(){

$("#" + that.setting.targetID).hide();

}

this.init = function(){

//顯示之前執(zhí)行回調(diào)函數(shù)

if(typeof that.setting.beforeShow == "function"){

that.setting.beforeShow(that);

}

//存放字符串的變量

var targetHTML = '';

//將內(nèi)容存放到指定的容器中，默認(rèn)存放到body最底部

if(that.setting.targetConater != "" && this.setting.targetConater != undefined){

targetHTML = '';

$(that.setting.targetConater).html(targetHTML);

}else{

targetHTML = '';

targetHTML = '

' + targetHTML + '';

$("body").append(targetHTML);

}

//判斷用戶是否自定義了圖片的寬度

if(that.setting.imgWidth != "" && that.setting.imgWidth.indexOf("px")>0 ){

$("#"+targetID).css("width",that.setting.imgWidth);

}

//顯示之后執(zhí)行回調(diào)函數(shù)

if(typeof that.setting.afterShow == "function"){

that.setting.afterShow(that,targetID);

}

}

this.init();

}

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的加载gif图片html,JS实现的自定义显示加载等待图片插件(loading.gif)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。