JS code for preload a page

I wanted to load a html page by using a preloader. For that first I made an animated .gif image for preloader.
<img src="image/anim.gif" width="324" height="20">

I worked it through layers, frames and forms.But I am not getting.I want that to happen after clicking on submit (onsubmit()) button.I am sending the code.Please help me in this regard,as early as possible.


<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="30">
<tr>
<td width="8" align="left" valign="top"><img src="image/curve21.gif" width="8" height="30"></td>
<td bgcolor="#708F99" class="innerheader" align="left" valign="middle">Upload
File</td>
<td align="left" valign="top" width="8"><img src="image/curve22.gif" width="8" height="30"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" height="1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" bgcolor="#999999" height="1"><img width="1" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#999999" width="1"><img width="1" height="1"></td>
<td align="left" valign="top">
<!--<Applet code="FileUpload.class" archive="FileUpload.jar" width="100%" height="215">
Applet is not supported
</Applet>-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#E3F0F4">
<tr>
<td width="8">&nbsp;</td>
<td width="150">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="290">&nbsp;</td>
</tr>
<tr>
<td width="8" height="25">&nbsp;</td>
<td width="150" class="headblack" height="25" align="left" valign="middle">Type
of File</td>

<input type="hidden" name="userID" value="<%=userID%>">
<input type="hidden" name="firmName" value="<%=firmName%>">
<input type="hidden" name="getpath" value="<%=getPath%>">
<input type="hidden" name="userName" value="<%=strEmailID%>">

<td width="50" height="25" align="left" valign="middle" class="headblack">:</td>
<td width="290" align="left" valign="middle" height="25">
<select name="fileType" style="background-color:#ffffff; border: 1px solid #00000; font-size: 10px; color:#000000; font-family: verdana; WIDTH:215px" onChange="chkPage(this.value)">
<option value="Pagination">Treater indexing and witness location</option>
<option value="Deposition" Selected>Deposition Summary</option>
</select>

<script>

function chkPage(val)
{
if(val == "Pagination" || val == "pagination")
{
location.href="Add_file.jsp";
}
}

</script>

</td>
</tr>
<tr>
<td width="8" height="25">&nbsp;</td>
<td width="150" class="headblack" height="25" align="left" valign="middle">File
Name </td>
<td width="50" height="25" align="left" valign="middle" class="headblack">:</td>
<td width="290" align="left" valign="middle" height="25">
<input type="file" name="file" size="27" style="background-color:#ffffff; border: 1 solid; font-size: 10; color:#3E2303; font-family: verdana">
</td>
</tr>
<tr>
<td width="8" height="100">&nbsp;</td>
<td width="150" class="headblack" height="100" align="left" valign="middle">Special
Instructions </td>
<td width="50" height="100" align="left" valign="middle" class="headblack">:</td>
<td width="290" align="left" valign="middle" height="100">
<textarea name="notes" wrap="virtual" rows="4" cols="26" style="background-color:#ffffff; border: 1px solid #00000; font-size: 10px; color:#000000; font-family: verdana;"></textarea>
</td>
</tr>
<tr>
<td width="8" height="25">&nbsp;</td>
<td width="150" class="headblack" height="25">&nbsp;</td>
<td width="50" height="25">&nbsp;</td>
<td width="290" align="left" valign="top" height="25">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="25">
<tr>
<td align="right" valign="middle" width="75">
<input type="image" name="submit" value="Submit" src="image/submit.gif" width="57" height="17">
</td>
<td width="10">&nbsp;</td>
<td align="left" valign="middle"><a href="index.jsp"><img name="cancel" src="image/cancel.gif" border="0" width="57" height="17"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="8" height="25">&nbsp;</td>
<td width="150" class="headblack" height="25">&nbsp;</td>
<td width="50" height="25">&nbsp;</td>
<td width="290" align="left" valign="top" height="25">&nbsp;</td>
</tr>
</table>
</td>
<td bgcolor="#999999" width="1"><img width="1" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#999999" height="1"><img width="1" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" height="30">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="30">
<tr>
<td width="8" align="left" valign="top"><img src="image/curve23.gif" width="8" height="30"></td>
<td width="484" bgcolor="#708F99" align="center" valign="middle" class="mandatory"><a href="#"><img src="image/img_01.gif" name="Loader" width="250" height="17" border="0"></a></td>
<td align="left" valign="top" width="8"><img src="image/curve24.gif" width="8" height="30"></td>
</tr>
</table>
</td>
</tr>
</table>

Solution is in using semantically meaningful mark-up for page content and CSS for page presentation, so that your code does not bloat to the point where you "need" to preload it.
For further optimization of HTML loading RTFM (http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#h-12.3)