Progress bar (animated GIF image) on page load or in some background process ::
I want an animated GIF to appear or load whenever my .aspx page (for my app) is loaded or submitted or some background process is running ::
<div id="WaitDialog" style="left: 480px; top: 255px; position: absolute">
<img src="http://developers.sun.com/docs/web-app-guidelines/uispec4_0/progress_graphics/asynch-1F.gif" />
<FONT size=3 class="text3" ><font color="black">Loading, Please Wait.</font></FONT>
</div>
function ProgressBar()
{
var dialog = document.getElementById("WaitDialog");
dialog.style.visibility = 'hidden';
scrollTo(0,0);
}
........ this animated image should load in the same way as the browser browser progress and if I do any checks on the database (DB statements say) then the image should load too ...
1) I am not using AJAX for my application, so I donβt want the AJAX to end up in the image too ...
2) the image should appear like on page load ...
ie Something goes in the background and the .gif image should load
How can I write code that matches this, since I now have a Javascript ProgressBar () function that I call by having onSubmit = "ProgressBar ()" on the body tag .....
Can anyone help me with this?
a source to share
With the following code, your image is already visible by default, it is hidden when the page is fully loaded. It is displayed when a form submission occurs.
Then, when the postback is displayed, the image will still be visible, then it will be hidden using window.onload () which is triggered when the browser has finished loading all the elements.
<head>
<script type="text/javascript">
window.onload = function (){ //hide onload
var dialog = document.getElementById("WaitDialog");
dialog.style.display = 'none';
scrollTo(0,0);
}
function showProgressBar(){ //show on submit
var dialog = document.getElementById("WaitDialog");
dialog.style.display = 'block';
}
</script>
</head>
<body>
<div id="WaitDialog" style="left: 480px; top: 255px; position: absolute">
<img src="http://developers.sun.com/docs/web-app-guidelines/uispec4_0/progress_graphics/asynch-1F.gif" />
<font size=3 class="text3" >
<font color="black">Loading, Please Wait.</font>
</font>
</div>
<form onsubmit="showProgressBar()">
.... all the ASPX controls and stuff
</form>
</body>
</html>
a source to share