IE 9 Becoming a Nightmare! May All its Developers Get Fired!

[KennyP]

Thanks for the info Bernie.
Coincidentally that site is where I originally got the CSS preload method I was using previously, which was actually working very well as far as preloading the images. John's code correction got rid of the initial white page which was being displayed, and instead now the page is black, as it should be; thereby making the same problem which is still there not as conspicuous. However, IE 9 is still delaying the display of the content on these pages, which doesn't seem to be caused by image loading time -- if I'm interpreting what I see correctly.

[jscheuer1]

I haven't looked exhaustively at the various pages, but aren't those main images the same for all of them? If so those could be put at the beginning of the css file just like the background color was. Like:

images/brook.gif

for the td, you could give it a class or id selector in the markup and set its background and other styles in css rather than inline. So instead of having this in the markup:

<td valign="right" width="766" height="424"  style="background-image:url(images/brook.gif); background-position:top right; background-repeat:no-repeat;">

You could make that like so:

<td id="brookbg">

And:

images/bg.gif

for the body. Then right after the declaration we just modified:

html, body {padding:0; margin:0; color:#ffffff; background-color: #000000 !important;}
body {background-image: url(/images/bg.gif) !important;}
#brookbg {
	width: 766px;
	height: 424px;
	background-image:url(/images/brook.gif);
	background-position: top right;
	background-repeat: no-repeat;
}

That will at least give the browser more of a chance to load those images more quickly.

[molendijk]

Hello KennyP,
These lines:

<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">

don't work in IE9, so even if you follow John's suggestion, the flicker will persist (if there's flicker) with IE9; it won't go away.
Note also that the flicker is even worse with the Google Chrome browser (try it; it's horrible)
Preloading images may help or not; there are numerous cases in which it doesn't work.
In my experience, the only way to get out of this is to put the image(s) explicitly on each page (don't include them via javascript).
Arie.
Edit:
When I posted this answer, I was reading page 1 of your thread and thought that was the whole thing. I only saw afterwards that there had been other answers, so there may be overlap.

[KennyP]

Thanks once again John, but although logically it should effect an improvement, it actually made the problem more pronounced. It doesn't make sense.

[jscheuer1]

Are you sure you had the paths to the images correct?

[molendijk]

I'd like to add THIS to my previous post and the discussion in general.
Arie.

[KennyP]

Yes John. Definitely the paths were correct. It seems that the browser insists on loading a blank page before loading the whole page, or at least delaying the page load.

Previously, when an image would load on the welcome page, it was cached for all other pages of the site. Is IE 9 different in this regard?


molendijk: Thanks for your input but I don't understand your point.

[molendijk]

molendijk: Thanks for your input but I don't understand your point.

Try the link using IE9. When you click on page1, page2 and page3, you'll see that the big background doesn't cause flicker (white flash) on page transition. So there must be a way to accomplish that on your site too.

Btw, there's a CSS trick for preloading images:

body:after {content: url(your_first_img.jpg) url(your_second_img.jpj) url(your_third_img.jpg)}

etc.
Might work in your case. I know it works with Google Chrome, where caching images often poses problems.
Arie.

[KennyP]

Thanks. I'll try that as soon as I get back home.

[KennyP]

Thanks for your input moledijk:

If I understood correctly, I tried adding the image urls in the style tag after body as...

content: url(/images/billy-joe-conor.jpg) url(/images/brook.gif);

but it did not make a difference.

I also took a look at the links displaying Page 1 Page 2 Page 3 in your sample, and I do notice no flicker is produced in IE 9. However, I'm not sure how to configure the shown code in the pages I'm working on. What do I substitute in place of 'your_external_file_without_big_image.html', and how can I use id="some_div" for additional inages?