Display “Loading” when the page Loads
The Following Example code works like this,
ButtonClick (Previous Page) -> Loading Page(that contains Loading Logic) -> Destination Page
The previous page is from where you click a button to process some data for example, it may be login page,once if we click the login it redirects to the page containing loading images from where it is redirected to the destination page ie to the page containing the result.
I have kept 5 images in a form and made its visibility as hidden.In body tag,
<body MS_POSITIONING="GridLayout" onload="go()">
I am calling the javascript function go() which inturn calls the function “Animate” every 250 ms interval. Each time the function “Animate” is called it sets the visibility of the image to “visible” one by one.
Add this tag which redirects from this page to detination page,
<META HTTP-EQUIV="refresh" CONTENT="0;url=http://www.msdn.microsoft.com">
<script language="javascript">
function go()
{
setInterval("Animate()",250);
}
var no=1;
function Animate()
{
if(no < 6)
{
var id= "loadingbox"+no;
var element= document.getElementById(id)
if(element)
element.style.visibility = "visible"
no++;
}
else
{
no = 0
if(document.getElementById("loadingbox1"))
document.getElementById("loadingbox1").style.visibility = "hidden"
if(document.getElementById("loadingbox2"))
document.getElementById("loadingbox2").style.visibility = "hidden"
if(document.getElementById("loadingbox3"))
document.getElementById("loadingbox3").style.visibility = "hidden"
if(document.getElementById("loadingbox4"))
document.getElementById("loadingbox4").style.visibility = "hidden"
if(document.getElementById("loadingbox5"))
document.getElementById("loadingbox5").style.visibility = "hidden"
}
}
</script>
<TABLE CELLPADDING="0" HEIGHT="50%" BORDER="0" style="Z-INDEX: 101; LEFT: 376px; POSITION: absolute; TOP: 176px">
<TR>
<TD HEIGHT="95%" ALIGN="center" VALIGN="bottom" ID="loadingtext" COLSPAN="5">
<IMG SRC="b24_loadingtext.gif" WIDTH="142" HEIGHT="35" ALT="Loading" TITLE="Loading" BORDER="0">
</TD>
</TR>
<TR>
<TD STYLE="VISIBILITY:hidden" ALIGN="center" VALIGN="top" ID="loadingbox1">
<IMG SRC="b24_loadingbox1.gif" WIDTH="27" HEIGHT="27" ALT="Loading" TITLE="Loading" BORDER="0">
</TD>
<TD STYLE="VISIBILITY:hidden" ALIGN="center" VALIGN="top" ID="loadingbox2">
<IMG SRC="b24_loadingbox2.gif" WIDTH="27" HEIGHT="27" ALT="Loading" TITLE="Loading" BORDER="0">
</TD>
<TD STYLE="VISIBILITY:hidden" ALIGN="center" VALIGN="top" ID="loadingbox3">
<IMG title=Loading height=27 alt=Loading src="b24_loadingbox3.gif" width=27 border=0>
</TD>
<TD STYLE="VISIBILITY:hidden" ALIGN="center" VALIGN="top" ID="loadingbox4">
<IMG SRC="b24_loadingbox4.gif" WIDTH="27" HEIGHT="27" ALT="Loading" TITLE="Loading" BORDER="0">
</TD>
<TD STYLE="VISIBILITY:hidden" ALIGN="center" VALIGN="top" ID="loadingbox5">
<IMG SRC="b24_loadingbox5.gif" WIDTH="27" HEIGHT="27" ALT="Loading" TITLE="Loading" BORDER="0">
</TD>
</TR>
</TABLE>
OR
Instead of doing like the above example with javascript,We can create a form with a single GIF Image that has a text “Loading” and we can add the html tag,
<META HTTP-EQUIV="refresh" CONTENT="0;url=http://www.msdn.microsoft.com">
which fulfills our need easily.
<table>
<TR>
<TD id="loadingbox" vAlign="top" align="center">
<IMG title="Loading" style="WIDTH: 181px; HEIGHT: 168px" height="168" alt="Loading" src="icon_inprogress.gif" width="181" border="0">
</TD>
</TR>
</table>
Satheesh
posted by Satheesh babu at
1:05 AM
0 Comments:
Post a Comment
<< Home