IE -- blink, twitch, blip, flash, reload on load

[sitehatchery]

Don't know what to call it. I've been googling for the last hour and can't find anything. In IE only, some of my sites blink when the page loads. Same happens with different cache settings. I've tried it on a couple of different computers running XP, IE7. However, I've noticed that other sites (not mine) don't blink in Internet Explorer.

Here's one example: www.farrelldesigngroup.com. It's not quite as noticeable when the page first loads. But then hit f5 and watch the main image load twice. Oddest thing... and it happens on several of my sites.

[sitehatchery]

Oh, and... refresh.

[sitehatchery]

Ok, I've fixed that one by making the main image a background image on a div.

But I noticed that images and flash objects often blink twice. Is there a good way around this? Is it a Javascript fix?

[WebJoel]

Are you using dial-up connect?
I do notice that there is some TABLE-layout being used, -and a nested-TABLE at that. TABLEs are not displayed until 'read' several times by the browser. This can cause 'flicker' as the TDs are being downloaded and populated, and shoved around as more data is being read/populated. Stating the widths & heights of everything helps, as this pre-llocates this much real-estate aforehand and allows the browser to 'read ahead' a little bit and not have to wait for the image (or whatever) to populate.

Some non-TABLE upgrade would help, and not necessarily nesting things that you have 'nested'... for example: the H-tag is "block level" and therefore, there is no real need to 'nest it' inside of a DIV for the only purpose of containerization. It can be it's own 'container' and be just fine.

I see a UL nested inside of a DIV as well and while both of these are okay and both are 'not in error' in any way, they CAN be used without the 'parent container'. -Saves a few bytes here and there (reduced time to resolve to screen, faster download, etc).

Those four images of lips, -they ARE four images, -yes? This looks like one large image. *I* would use a image-editing program and stick them all together into ONE image that is 'tall' and use that for each 'square' and using "positioning", just move the image upwards (or whatever) to reveal each variant colored section. The 'overflow' is 'hidden' and the image is read ONCE, but used FOUR times. Advantage: CSS! :) Just ONE http call instead of four... This can save a second or three right there of download time (dial-up users will appreciate that!), and using a image pre-loader, another second or two might be realized..
The text part should be a H-tag, not 'in the image' as this is invisible to anything other than a monitor. (If I turned images OFF, I see nothing and that is not what you want me to see).

There are things that can be done to speed this up and reduce/elminate 'flicker' (which at my nearly T-1 speed, I did not see btw).. :)

[sitehatchery]

Thanks!

No dial up, I'm using cable.

Yes, there's no need for a table here. I need to change that. I appreciate your information on tables... I did not know that they were read several times before displaying.

The navigation list items are the result of a function call. The div is the editable part that surrounds the list: <div id='navigation'><?php echo $this->navigation(); ?></div> ... looks something like that.

The four lips are one image as a background of a div. I did this so that the broken image link doesn't appear while the image is loading.

Thanks for all your advice... I'll work on that next week.