快速添加加载等待效果的js

为什么80%的码农都做不了架构师？>>>   

刚写的一个快速添加加载等待效果的js，快速添加，省时省力。

js:

/*

* 增加异步加载遮罩

* @auth:firmy

* @mail :fimry@foxmail.com

* 使用方法:在异步请求前加遮罩：addLoadCover()

* 异步完成后关掉遮:closeCover()

* 例：

* function(){

* addLoadCover();

* $.getJSON(url,params,function(data){

* ...

* ...

* ...

* closeCover();

* });

* }

*/

function showBg(ct, content) {

var bH = $("body#body").height();

var bW = $("body#body").width() + 16;

var objWH = getObjWh(ct);

$("#fullbg").css({

width : bW,

height : bH,

display : "block"

});

var tbT = objWH.split("|")[0] + "px";

var tbL = objWH.split("|")[1] + "px";

$("#" + ct).css({

top : "180px",

left : tbL,

display : "block"

});

// $("#"+content).html("");

$(window).scroll(function() {

resetBg()

});

$(window).resize(function() {

resetBg()

});

}

function getObjWh(obj) {

var st = document.documentElement.scrollTop;// 滚动条距顶部的距离

var sl = document.documentElement.scrollLeft;// 滚动条距左边的距离

var ch = document.documentElement.clientHeight;// 屏幕的高度

var cw = document.documentElement.clientWidth;// 屏幕的宽度

var objH = $("#" + obj).height();// 浮动对象的高度

var objW = $("#" + obj).width();// 浮动对象的宽度

var objT = Number(st) + (Number(ch) - Number(objH)) / 2;

var objL = Number(sl) + (Number(cw) - Number(objW)) / 2;

return objT + "|" + objL;

}

function resetBg() {

var fullbg = $("#fullbg").css("display");

if (fullbg == "block") {

var bH2 = $("body").height();

var bW2 = $("body").width() + 16;

$("#fullbg").css({

width : bW2,

height : bH2

});

var objV = getObjWh("dialog");

var tbT = objV.split("|")[0] + "px";

var tbL = objV.split("|")[1] + "px";

$("#dialog").css({

top : tbT,

left : tbL

});

}

}

function addLoadCover() {

$("body").attr("id", "body");

$("body#body")

.append(

"<!-- JS遮罩层 --> <div id='fullbg'></div> <div id='dialog' style='text-align:center'><img src='/static/images/wait.gif'>正在加载，请稍候...</div>");

showBg('dialog', 'dialog');

}

// 关闭灰色JS遮罩层和操作窗口

function closeCover() {

$("#fullbg").css("display", "none");

$("#dialog").css("display", "none");

}

附css:

#fullbg{

opacity: 0.4; /*透明度*/

background-color: Gray;

display:none;

z-index:3;

position:absolute;

left:0px;

top:0px;

/* IE */

-moz-opacity:0.4;

/* Moz + FF */

opacity: 0.4;

}

#dialog {

position:absolute;

width:40%;

height:20px;

display: none;

z-index: 5;

}

转载于:https://my.oschina.net/firmy/blog/91348