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

时间:2015-09-01 11:33:49

标签: javascript css asp.net

我需要显示加载图像,直到从数据库中获取数据并绑定到datagrid。我在父页面(A.aspx)中有一个按钮,当我们点击该按钮时它将显示Overlay中的数据(B.aspx)。我们使用greybox在叠加层中显示页面。我已将加载图像放在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>

1 个答案:

答案 0 :(得分:-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>