Large number of HTML elements, Is there is any way to load the page faster?
I have a load page contains large number of html elements such as >150 forms and each forms having same name of elements but with different form names. E.g kindly please take a look over the attached html code. Since the requirement in such that I need to show all the 150 forms on one load. Also I try to use the yahoo YUI tab component, one tab contains 15 forms and the current screen is full already. I face a problem of very slow loading during initial load. Also I use ajax for server callings. So that I don’t have to redraw every time when I post something to the server. It works fine. Am looking a solution for initial load delay. Kindly please give me some tips over on this, how to overcome on this issue.
Thank you.
Code:
<DIV id = "divselectForm1" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm1">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
<TR>
<TD>
<INPUT type = radio Name=ts style="WIDTH: 10px" checked>
<INPUT name=COL1 maxLength=2 value=11 style="WIDTH: 15px; BACKGROUND-COLOR: #ccff99">
<SELECT NAME=COL2 style="WIDTH: 105px; COLOR:WHITE; BACKGROUND-COLOR: #3366CC" onchange="getagentids(this.form.name,'COL2');">
<OPTION selected VALUE="SELECT">SELECT</OPTION>
<OPTION VALUE="START" style="BACKGROUND-COLOR: lightgreen">START</OPTION>
</SELECT>
<INPUT name=COL3 maxLength=2 value=11 style="WIDTH: 15px; BACKGROUND-COLOR: #ffff99">
<INPUT type = radio Name=ts style="WIDTH: 10px">
<INPUT TYPE="button" value="M" style="WIDTH: 20px; HEIGHT: 22px" onclick="pageTypeone(this.form,'<M>');"></TD>
</TR>
<TR>
<TD><SELECT NAME=COL4 style="WIDTH: 85px; BACKGROUND-COLOR: #ccff99"><OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT>
<SELECT NAME=COL5 style="WIDTH: 85px; BACKGROUND-COLOR: #ffff99"><OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT></TD>
</TR>
<TR>
<TD>
<INPUT value=- style="FONT-WEIGHT: normal; WIDTH: 13px; HEIGHT: 22px" type=button size=5 width="20" onclick="scoreminus(this.form,this.form.COL6)"><INPUT name=COL6 readonly value=0 style="WIDTH: 18px; BACKGROUND-COLOR: #ccff99"><INPUT value=G1 style="WIDTH: 22px; HEIGHT: 22px" type=button onclick="scoreplus(this.form,this.form.COL6,'G1')">
<INPUT name=COL7 value="00:00" style="WIDTH: 35px; BACKGROUND-COLOR: yellow"><INPUT name=COL25 style="WIDTH: 25px"><INPUT TYPE="button" style="WIDTH: 20px; HEIGHT: 22px" onclick="Timer(this.form,'COL7');" value="...">
<INPUT type=button value=- style="WIDTH: 13px; HEIGHT: 22px" onclick="scoreminus(this.form,this.form.COL8)"><INPUT name=COL8 readonly value=0 style="WIDTH: 18px; BACKGROUND-COLOR: #ffff99"><INPUT type=button value=G2 style="WIDTH: 22px; HEIGHT: 22px" onclick="scoreplus(this.form,this.form.COL8,'G2')"></TD>
</TR>
<TR>
<TD><SELECT NAME=COL9 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL10 style="WIDTH: 30px"><SELECT NAME=COL11 style="WIDTH: 55px; BACKGROUND-COLOR: #ffff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL12 style="WIDTH: 45px">
<SELECT NAME=COL13 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL14 style="WIDTH: 30px"><INPUT name=COL15 value=',,,,' title="HALFTIME(A-B),FULLTIME(A-B),EXTRA TIME(A-B) AND PENALTY(A-B)" style="WIDTH: 100px"><INPUT name=COL16 style="VISIBILITY: hidden; WIDTH: 30px">
<SELECT NAME=COL17 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL18 style="WIDTH: 30px">
<INPUT name=COL19 style="WIDTH: 50px" onkeyup="return Upper(event,this);"><SELECT NAME=COL20 style="WIDTH: 45px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT>
<SELECT NAME=COL21 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION><OPTION VALUE="ODDS/EVENT">ODDS/EVENT</OPTION>
</SELECT><INPUT name=COL22 style="WIDTH: 30px"><INPUT name=COL23 style="WIDTH: 30px">
<INPUT name=COL24 style="WIDTH: 30px"><INPUT type="checkbox" name="chkGroup" checked>
<INPUT type=hidden NAME=REFERENCE VALUE="S.B1" style="WIDTH: 30px">
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
<DIV id = "divselectForm2" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm2">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
//same elements like the above form 1
</TABLE>
</FORM>
</DIV>
<DIV id = "divselectForm3" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm3">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
//same elements like the above form 1
</TABLE>
</FORM>
</DIV>
<DIV id = "divselectForm4" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm4">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
//same elements like the above form 1
</TABLE>
</FORM>
</DIV>
.
.
.
.
<DIV id = "divselectForm151" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
</DIV>