Javascript 如何在asp.net 4中显示页面加载事件之前的加载图像？
我需要显示正在加载的图像，直到从数据库获取数据并绑定到datagrid。我在父页面中有一个按钮（a.aspx），当我们单击该按钮时，它将在覆盖（B.aspx）中显示数据。我们已经使用greybox在覆盖中显示页面。我已将加载图像放置在B.aspx中 数据网格中数据的获取和显示在页面加载中处理。由于所有逻辑都在页面加载中处理，因此元素在DOM中不可用 我无法显示/隐藏正在加载的图像 注意：我已尝试将相同的加载图像放置在父页面（A.aspx）中。但加载图像显示在覆盖层后面 请查找代码片段：Javascript 如何在asp.net 4中显示页面加载事件之前的加载图像？,javascript,css,asp.net,Javascript,Css,Asp.net,我需要显示正在加载的图像，直到从数据库获取数据并绑定到datagrid。我在父页面中有一个按钮（a.aspx），当我们单击该按钮时，它将在覆盖（B.aspx）中显示数据。我们已经使用greybox在覆盖中显示页面。我已将加载图像放置在B.aspx中 数据网格中数据的获取和显示在页面加载中处理。由于所有逻辑都在页面加载中处理，因此元素在DOM中不可用 我无法显示/隐藏正在加载的图像 注意：我已尝试将相同的加载图像放置在父页面（A.aspx）中。但加载图像显示在覆盖层后面 请查找代码片段： prot
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>
受保护的无效页面加载（对象发送方，事件参数e）
{
尝试
{
thropbersplashoverlay.Visible=true；
}
}
#ctl00_CPSU内容保持器_thropbersplashoverlay
{
背景色：白色；
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：500；
}
#悸动
{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：1000；
背景：url（../App_Themes/Blue/images/indicator.gif）无重复中心；
}
编辑：第一次加载页面时，在页面完全加载之前，您不能调用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>
等待
//剩下的html
函数doHourglass（）
{
console.log（“内窥镜”）；
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'；
}
函数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'；
}
clientIDmode=“static”