Page Load

[RFH Reseller: askjim]

Hi,

Can anyone shed any experience of controlling the order of page elements loading on a web page, as I want to ensure the page loads in an order that is pleasing to the eye.

Thanks

James

[Staff: Warren Ashcroft]

Hi,

Can anyone shed any experience of controlling the order of page elements loading on a web page, as I want to ensure the page loads in an order that is pleasing to the eye.

Thanks

James

A HTML document is rendered from top to bottom AFAIK, you cant control it...

[RFH Reseller: nick]

A HTML document is rendered from top to bottom AFAIK, you cant control it...

You can however use CSS to reposition the elements (to a certain extent) allowing things to appear in a different order on the page than in the source.

[Staff: Warren Ashcroft]

You can however use CSS to reposition the elements (to a certain extent) allowing things to appear in a different order on the page than in the source.

Yes, but the entire page would need to load before that happens, the guy wants to control how it loads...

[RFH Reseller: nick]

Yes, but the entire page would need to load before that happens, the guy wants to control how it loads...

The documents html and css would need to load, but this should happen pretty fast, the css would then be affecting the positions of the elements the rest of the page's media loads into.
It's not a great solution I agree, but it does have one or two possibilities

[RFH Customer: cswd]

If you look at ebay, they have changed it so that the auction listing appears before the left hand navigation. This is easily possible...

They do this by sending the page in the following order:

They send the Header DIV

They send the auction list (with margin-left: 200px). It is rendered progressively as each row is a DIV with a left margin rather than a table.

They then send the left navigation which is float: left;

You just have to write a conceptual model in your brain and load order in your head, arrange it in the HTML page and then adjust the CSS so that it renders. Test it with one of those slow down http proxies.

To guarantee instant CSS, stick a <Style> section in your page header with the most essential styles (ie layout) and load the rest in with the <link> tag later.

Note: Avoid tables - they only load in complete lumps. Stick to discrete elements like table rows implemented as a DIV containing SPANs.

Come to think of it, I've been doing this for a good 5 years now!