Hi all, i need a little help with some code that should display a gif image while a page loads.
i have a php page with a link that users can click and it should load a page via ajax as an overlay over the current page. the problem is that the loading page makes some requests to some customers' systems and some of them could be really slow taking sometimes 8-10 secs to load. during that time, the overlay pops up and just displays a blank page.
i have some code that should display a gif image with a loading message, the problem is that the blank page(of the overlay) loads over it.
question:
is there any way to prevent the from displaying until all the contents have loaded then display the page at once?
the html code i use for this is below(its triggered by an onclick event). does anyone have a way i can do this?
right now, the gif loads on the calling although it should load over it. i use the same code on the overlay when any further requests are made and it loads over it. does anyone see why it does not load over the calling page?
<html>
<head>
<script>
showProcess('Loading Family Pricing Parts');
function showProcess(textMessage){
//if (document.getElementById("showProcessDIV")){
if(document.getElementById("showProcessDIV").style.display=="none"){
document.getElementById("showProcessDIV").style.display="block";
document.getElementById("ProcessMessage").innerHTML=textMessage;
}
//}
}
function hideProcess(){
//if(document.getElementById().style.display=="block"){
document.getElementById("ProcessMessage").innerHTML="";
document.getElementById("showProcessDIV").style.display="none";
//}
}
</script>
</head>
<body >
<div id="showProcessDIV" style="display:none">
<div id="showProcessAlpha"></div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="showProcessTABLE">
<tr>
<td align="center" valign="middle">
<table border="0" cellspacing="0" cellpadding="20" class="ProcessTable">
<tr>
<td class="Process" nowrap="nowrap" id="ProcessMessage">Adding Parts... Please wait...</td>
<tr>
</tr>
<td valign="top" align="center" height="60"><img src="images/ajax-loader2.gif" width="32" height="32" align="top" /><br /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>