0

On my site: www.metallica-gr.net you can see that the main table has 3 columns.

1st column(left): Vertical image
2nd column(middle): Main content
3d column(right): Vertical image

Problem is, because the right image is on the bottom of the code(since it's the tables last column) it waits for main conent to load before appearing. So before the site loads it looks messy, since only one border of the layout appears.

I can't use the divs for this since I have a lot html pages made already, and also when I tried it didn' went good. Is there any way to fix this? Here's the code:

index.html:

<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
      <tr>
        <td width="2" valign="top"><?php include "vertical.php"?></td>
        <td valign="top" style="vertical-align:top;">
    <div><?php include "main.html"?></div></td>
        <td width="2" valign="top"><?php include "vertical.php"?></td>
      </tr>
    </table>

vertical.php:

<div style="background-image:url(images/vertical.jpg); width:2px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0;"></div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Tasos
  • 1,622
  • 4
  • 28
  • 47
  • Do you use `include()` inside a `.html` document? – Praveen Kumar Purushothaman Nov 03 '12 at 09:01
  • 1
    You're using tables for layout. That's highly not recommended and will give you extreme headaches in the not-so-far future. – Madara's Ghost Nov 03 '12 at 09:03
  • @Kumar - What do you mean? the code used is above. - Uchiha As I said I tried the div method but I was having some issues with it. I haven't found any other issues by using table as layout for the particular website. If anyone could recommend a solution please let me know. – Tasos Nov 03 '12 at 09:09
  • Hi Zefs, Do you mean by that share buttons portion. And you want to load that portion with page loads not after at the last, Right? – Dhaval Nov 03 '12 at 09:10
  • No, not that. The table borders(left and right images of the layout). Right one loads after main content is loaded because the code for it is located below the main content. – Tasos Nov 03 '12 at 09:13

2 Answers2

3

While I would recommend exploring a more modern HTML structure (like the use of divs), I understand that sometimes a complete restructuring is not viable.

I believe the PHP output buffer may offer an interim solution.

<?php ob_start(); ?>
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
    <tr>
        <td width="2" valign="top"><?php include "vertical.php" ?></td>
        <td valign="top" style="vertical-align:top;">
            <div><?php include "main.html" ?></div>
        </td>
        <td width="2" valign="top"><?php include "vertical.php" ?></td>
    </tr>
</table>
<?php ob_end_flush(); ?>

What this will do is hold the page response until all the includes have been processed. You should also be aware that while this may cause less "shuffling" on the page it could also increase the perceived load time.

See the PHP Manual's documentation on ob_start for more information: http://www.php.net/manual/en/function.ob-start.php

While the above should take care of any issue caused by PHP includes it looks like you may have a few other likely culprits. The most likely being that you have tags loading from an "src". Script tags will delay all other loading while they're being loaded and processed which is why it is recommended that they be added asynchronously if possible. If they cannot be loaded asynchronously they should be included within the or directly above the closing tag.

For a little more information on your script issue see: Does the <script> tag position in HTML affects performance of the webpage?

While sifting through the HTML I also spotted quite a few validation errors that should probably be resolved: http://validator.w3.org/check?uri=http%3A%2F%2Fmetallica-gr.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Even a table based layout should validate as it makes browser rendering more predictable and bug hunting easier.

Community
  • 1
  • 1
Matt Rohland
  • 706
  • 10
  • 19
  • Didn't seem to work for me, left php include image still loads faster. – Tasos Nov 03 '12 at 20:28
  • The above code delivers the entire table's HTML at once (rather than potentially loading pieces of it). If an include took a while to load you run the risk of only getting part of the table structure, which browsers tend to make a mess of. How the 2 images load is up to the browser. I'm not seeing them load at different intervals in Chrome (http://www.screencast.com/t/DB3t9fSRpZ) or Firefox (http://screencast.com/t/mfqzyMJr6pe). – Matt Rohland Nov 04 '12 at 15:18
  • Thanks for the screencast. On this example though you either using a quite fast connection or the data are stored in cache because you visited the site before. If I clear the browser cache and view it again, it does happen. – Tasos Nov 04 '12 at 18:51
  • What browser are you using? In the current version of Firefox and Chrome all iterations of the same image will load at the same time. See the test here http://jsfiddle.net/wW7hT/ and the screencast of the test here http://screencast.com/t/df2HeR57Z3W (using a much larger image to compensate for connection speed). If you're still seeing this in Chrome or Firefox there may be something else in play. Can you share a screencast of what you're seeing? – Matt Rohland Nov 04 '12 at 22:55
  • I tried with every browser. On your screencast though you are not using a table structure. Also, my main content contains a images and sripts, so that's probably what's slowing down the load of the right image. You can't reproduce it with only one image(like the cat one). – Tasos Nov 05 '12 at 08:34
  • The screencast I provided uses the code in the jsfiddle link above (it has a table layout). To your point, embedded scripts within the table could cause unexpected quirks; Sprinkling script tags throughout the body of the website is not recommended. Again, a screencast of what you're seeing at load time would be extremely helpful. – Matt Rohland Nov 07 '12 at 12:54
  • Here's a screencast: http://www.youtube.com/watch?v=ixuitP0QAQc it's most visible when I hit on Tour on this video. The right image seems preloaded from cache but the left one is problematic(could have to do with max-width css I use as well). – Tasos Nov 07 '12 at 16:16
0

I think you should replace the table structure with div structure because that's the draw back of table structure that it'll load each TR / TD line by line while in DIV structure we make different divisions that's why browser will load different divisions simultaneously and that's why now a days designers are prefer DIV structure.

In your case it's starting to load from first TD and end with the last TD one by one so I think DIV structure is the solution for your problem.

Dhaval
  • 901
  • 3
  • 8
  • 26