Forum Moderators: not2easy
Here's the deal, I have a beautiful new template that I had someone make a few months back, renders perfectly in every browser, validates 4.01 transitional, looks smashingly nice.
However, I had only previewed it from my desktop machine, signed off on project, but I had to shelve it a few months for various reasons, developer out of the picture now, etc.
Anyway, today I finally load it on the server and it seems to render backwards!
All of the embedded images on the page display first, then the images in the CSS template, then the background image fill of the CSS template.
It looks pretty when it's completed but it looks like hell while it's loading.
I looked into some preload options but those don't seem to do what I'm wanting as I want the template portion to load first, then the embedded images, etc. basically exactly the opposite of how it's behaving.
If it went the other way I'd be using it right now but I can't have it render like this, what should I be looking for?
Of all things Firefox seems to handle it best with IE being worst.
[edited by: incrediBILL at 3:19 pm (utc) on May 29, 2009]
The important part might be that many small images as background in CSS isn't the best option, I'd look into "CSS sprites".
It's basically the opposite of image slicing: merge all your small images into a large one and then position it so that you show the portion you need.
Sites such as ask, yahoo etc all use this technique to speed up their sites. (Yslow will push you in that direction as well).
Of all things Firefox seems to handle it best with IE being worst.
I'm not sure, but you might also be describing "FOUC" (flash of unstyled content) as well. If that's the case it displays without (all) CSS applied to it for a brief moment. There are some ways to get that to happen less.
One of the easiest is to make sure the CSS in added by using a <link> in the HTML, and not by using @import constructs in CSS.
As far as browsers are concerned (when it all does go slow): the content images (the <img> tag in your html) will go before the background images of the CSS in priorities to load in most -if not all- browsers.
To make that lesser of a concern: there is a way to add both a solid background color (will be used as soon as the CSS loads -if you see it without it you have a FOUC situation-) and then the background image can come in later to enhance the display. Usually picking a solid color that matches the background as close as possible works best.
So combined:
