How to show the loading image before page_load event in asp.net 4?
Question
I need to show the loading image until data fetched from the database and bind to the datagrid.I have a button in the parent page (A.aspx), when we clicked on that button it will display the data in the Overlay (B.aspx). We have used greybox to display page in the overlay. I have placed the loading image in the B.aspx
The fetching and display the data in the datagrid are handled in the Page_Load. Since it all the logics are handled in the page_load, the elements will not be available in the DOM.
I am not able to show/hide the loading image.
Note: I have tried to placed the same loading image in the parent page (A.aspx). But the loading image is displaying behind the overlay.
Please find the piece of code:
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 answers
solution1
-1 2015-09-01 11:41:13
as per my understanding you are displaying data in b.aspx.so use javascript function in b.aspx.onbeforeunload is for IE.
EDIT:while page is loading for the first time you can not call javascript function until the page loads completely.so show a wait image inside a div.and hide your entire page until the page loads completely.second time you can use onunload or onbeforeunload events.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.