Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Large number of HTML elements, Is there is any way to load the page faster?

    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 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>
    Last edited by vsstephen; 04-15-2009 at 02:57 AM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Don't know why you need that many forms and all those inputs. Looks like a user interface problem more than anything else. Even with all that, it shouldn't take that long to load but I don't see the complete form either.

    I would say, quit using tables for layout and that would speed things up but not as much as someone rethinking all that input. And that's not bringing up all the invalid markup either.

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Im trying to find a html code that will play video in order one after the other.
    windows media player im making a internet movie...lol

  • #4
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how about adding more objects

    when your adding an object like windows media player and a flash object at the same time , doesnt seem to pick up both like old explorer6

  • #5
    New Coder
    Join Date
    Feb 2009
    Location
    Los Angeles
    Posts
    40
    Thanks
    2
    Thanked 1 Time in 1 Post
    I notice you also repeat the same styling elements over and over. It's time to use CSS as a way of minimizing the formatting. Give it a look and see what you think. It can greatly speed up your loading time.

  • #6
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    I'm with mikemacx, look at getting rid of the TABLE layout and instead use the CSS box model. In addition, one of the more important things you can do is to remove all the inline stuff (styles and JavaScript / event handlers) and push them to out to external files, encapsulating everything into functions, especially any repeated code. Any DOM code can and should be loaded at the very bottom of your document body, just prior to your closing tag (linked-in stylesheets should remain in the document head - use the LINK tag to pull in CSS instead of @import). CSS and JS can be compressed.

    There is a really good article on the Yahoo! Developer site titled "best practices for speeding up your website". I've put some of those into action and made big improvements in page loads.

  • #7
    New Coder
    Join Date
    Mar 2009
    Location
    in your dreams
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    i notice that you are using forms for what it looks wired and also you should use CSS.

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Kindly pls take a look at this screen, This is the actual loading page.

    Kindly pls take a look at this screen, This is the actual loading page.

    Following link is the loading page
    http://www.i-message.com.my/fb8888/result.php

    Following is the full set of html code
    http://www.i-message.com.my/fb8888/forForum.txt

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    OK, you should definitely move your JS and CSS into external files. While I’m not at all sure what your page is about it seems like the forms do have their purpose so there’s not much optimization in terms of form markup. You should, however, scrap the tables and use more semantic HTML because except of the stats table at the bottom that’s not what tables are meant for.

    Also if all the forms have the same markup and just a different name you couls use a PHP loop to generate the same HTML over and over again and just have the name as variable. This wouldn’t make less code for the browser but it might be easier for you to maintain since you only have to change one time in order to change all forms.

    A few suggestions for cleaner code:
    1. Use a proper doctype. Yours is incomplete and will throw IE into quirks mode. Also for IE the doctype must be on the very first line, no white space, character, or empty line should be before it. I strongly recommend HTML or XHTML strict.
    2. Write all HTML lowercase.
    3. Always wrap the attribute values with quotes like <select name="selectName">
    4. The name attribute is deprecated for all elements (this includes the form element) except form controls. So you should replace the form name attributes with ID attributes. JS can pick them up like forms[‘form1'].


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •