showLoading.css 样式：
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 50% 0 0;background:#333333;display:none;} .showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;} *html,*html body{background-image:url(about:blank);background-attachment:fixed;} *html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));} #AjaxLoading{color:#37a;font-size:12px;font-weight:bold;} /*#AjaxLoading div.loadingWord{300px;height:50px;line-height:50px;border:0px solid #000000;background:#65eae6;}*/ #AjaxLoading div.loadingWord{} #AjaxLoading img{margin:10px 15px;float:left;display:inline;}
html 代码,辅助两个div
<body> <!--遮罩 开始--> <div class="overlay"></div> <div id="AjaxLoading" class="showbox"> <div class="loadingWord"><img src="/resource/jQuery.showLoading/images/loading2.gif" /></div> </div> <!--遮罩 结束--> </body>
JS代码
<script type="text/javascript">
//----判断当前页面是否加载状态 开始 ----
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething() {
if (document.readyState != 'complete') //当页面加载状态
{
//----显示遮罩 开始----
$(".overlay").css({ 'display': 'block', 'opacity': '0.8' });
$(".showbox").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);
$('#AjaxLoading').show()
//----显示遮罩 结束----
}
}
//----判断当前页面是否加载状态 结束 ----
$(function () {
jQuery.ajax({
url: 'test.ashx',
type: "POST",
dataType: "json",
data: { "cptypeid": cptypeid, "cpnameid": cpnameid },
success: function (result) {
if (result.success) { }
//----隐藏遮罩 开始----
$(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
$(".overlay").css({ 'display': 'none', 'opacity': '0' });
$('#AjaxLoading').hide()
//----隐藏遮罩 结束----
} })
})
</script>