如何在asp.net 4中的page_load事件之前显示加载图像？答案

【问题标题】：How to show the loading image before page_load event in asp.net 4?如何在asp.net 4中的page_load事件之前显示加载图像？
【发布时间】：2015-09-01 11:33:49
【问题描述】：

我需要显示加载图像，直到从数据库中获取数据并绑定到数据网格。我在父页面 (A.aspx) 中有一个按钮，当我们单击该按钮时，它将在 Overlay 中显示数据(B.aspx)。我们已经使用灰盒在叠加层中显示页面。我已将加载图像放在 B.aspx 中

在数据网格中获取和显示数据在 Page_Load 中处理。由于所有逻辑都在 page_load 中处理，因此元素在 DOM 中将不可用。

我无法显示/隐藏加载图像。

注意：我尝试在父页面（A.aspx）中放置相同的加载图像。但是加载图像显示在叠加层后面。

请找出这段代码：

protected void Page_Load(object sender, EventArgs e)
   {
       try
       {
           throbberSplashOverlay.Visible = true;
       }
}





#ctl00_CPSContentHolder_throbberSplashOverlay
{
    background-color:White;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 500;
}
#throbberSplash
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background:  url(../App_Themes/Blue/images/indicator.gif) no-repeat center center;
}



<div id="throbberSplashOverlay" runat="server" visible="false"><div id="throbberSplash"></div></div>

【问题讨论】：

什么是#ctl00_CPSContentHolder_throbberSplashOverlay？
您是否重定向到其他页面以显示数据？
@Ursus: throbberSplashOverlay.ClientID
@ThangamaniPalanisamy 您确定 ID 正确吗？我认为处理浏览器行为的正确方法是设置clientIDmode="static"
@shreesha：其实我并没有从 A.aspx 重定向到 B.aspx。我只是将 B.aspx 作为模态打开

标签： javascript css asp.net

【解决方案1】：

据我了解，您在 b.aspx.so 中显示数据，因此在 b.aspx.onbeforeunload 中使用 javascript 函数适用于 IE。
编辑：第一次加载页面时，您不能调用 javascript 函数，直到页面完全加载。所以在 div 中显示等待图像。并隐藏整个页面，直到页面完全加载。第二次您可以使用 onunload 或 onbeforeunload事件。

<html>
<head>
<script>
</script>

</head>
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="show();">
<div id="divWait" style="display:inline" >
      <h1>wait...</h1>
  </div>

<div id="main" style="display:none">
<input type="button" onClick="call your method" />
//your rest of the html
<div/>

<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
 var divmainpage=document.getElementById('main');
 divmainpage.style.zIndex="0";
 divwait.style.zIndex="1";
 divwait.style.display='inline';
divmainpage.style.display='none';
}

function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
 var divmainpage=document.getElementById('main');
 divmainpage.style.zIndex="1";
 divwait.style.zIndex="0";
 divwait.style.display='none';
divmainpage.style.display='inline';
}

</script>
</body>
</html>

【讨论】：

您正在将 b.aspx 作为模态窗口或新窗口打开
作为模态使用 Greybox
它不工作。页面完全加载成功后显示加载图标
发生了什么？您看不到“等待..”消息吗？