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

Question

我需要显示加载图像，直到从数据库中获取数据并绑定到数据网格为止。在父页面（A.aspx）中有一个按钮，当我们单击该按钮时，它将在覆盖（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>

Answer 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>