全屏加载面板

ASP.NET 社区

0/5 (0投票)

2013 年 10 月 11 日

CPOL

6931

经过几个项目，终于完成了这个简单的加载面板脚本。希望对您有所帮助。JavaScript 函数 ShowLoading() {

经过几个项目，终于完成了这个简单的加载面板脚本。希望对您有所帮助。

JavaScript

function ShowLoading() {

 
    function GetWidth() {
        var x = 0;
        if (self.innerWidth) {
            x = self.innerWidth;
        }
        else if (document.documentElement && document.documentElement.clientWidth) {
            x = document.documentElement.clientWidth;
        }
        else if (document.body) {
            x = document.body.clientWidth;
        }
        return x;
    };
 
    function GetHeight() {
        var y = 0;
        if (self.innerHeight) {
            y = self.innerHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
            y = document.documentElement.clientHeight;
        }
        else if (document.body) {
            y = document.body.clientHeight;
        }
        return y;
    };
 
    $("body").append("<div class='LsnLoadingPanelFade'></div><img style='top:" + (GetHeight() / 2).toString() + "px; left:" + (GetWidth() / 2).toString() + "px' class='LsnLoadingPanel'/>");
};
 
function HideLoading() {
    $(".LsnLoadingPanelFade").remove();
    $(".LsnLoadingPanel").remove();
};

CSS 类

.LsnLoadingPanelFade 
{
 	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index:99999;
}
 
.LsnLoadingPanel 
{
	position: fixed;
	z-index:100000;
	background-image:url('../Images/Loading.gif');
	width:106px;
	height:54px;

}

这些示例脚本必须与 jQuery 配合使用。例如：

这样，您可以简单地注入以下脚本，一个全屏加载面板就会弹出。享受并快乐编码！

ShowLoading();