Could some have a look at this?

[rogierius]

Hello again.

I've been having a background image flickering/flash on reload or going to next page.

Please have a look and tell me if you experience the following: In IE8 whenever I click on another pagelink within the site, the background image gives off a little flash. On closer examination, it seems each and every image on this site does that. On even closer examination, it seems the whole darn page flashes.

Now, there are several solutions to this (1 and 2 and a small discussion here), none of them I got to work.



Suggested solution numero uno:

<meta http-equiv="Page-Enter" content="revealtrans(duration=0.1)" />
<meta http-equiv="Page-Exit" content="revealtrans(duration=0.1)" />

Suggested solution number two:

in your css, get rid of the background color you have for each background image or make it transparent.

IE8 is a fresh install. IE8 on my girlfriend's laptop produces the same page flash. I've googled this intensively, but can seem to fix it. Anybody out there willing to shed some light on this?

[Scriptet]

I can't actually reproduce the problem you are experiencing on my IE8 (winXP)...

When I click a link the new background image loads in like a second then just appears as normal..

Then when I re-click a link where the bg image is already in the cache it smoothly instantly changes from one bg image to another.

I have to say nice design btw I like the colour scheme changes

[rogierius]

Originally Posted by Scriptet

I can't actually reproduce the problem you are experiencing on my IE8 (winXP)...

When I click a link the new background image loads in like a second then just appears as normal..

Then when I re-click a link where the bg image is already in the cache it smoothly instantly changes from one bg image to another.

I have to say nice design btw I like the colour scheme changes

Hmm, interesting. You made me look again.

I was mistaken though, on my girlfriend's notebook, only flicker noticable is between change of background colour. Other images or text does not flicker. Once it is loaded into the cache, not flickering of background image.

I've noticed that on my own PC the flickering/flashing is much worse when I get the message on top of the browser that an ActiveX control or a script wants to do it's work. When I select allow, then only the flickering applies to the background image. On my girlfriend's notebook, background image change is rather okay and not disturbing.

When I find the checkbox to allow ActiveX content, then I hope the flickering is gone.

Thanks!

[rogierius]

A bump because the problem of the background image flash/flicker is still there.

I can't get it to load smoothly in IE7 and IE8.
On my girlfriends laptop, the background image (6 total), gives of a short flash/flicker when I load the next background image. It looks like it loads the next image, but just before the new background image is shown, the white background is seen (and this creates the flash).

I'm certain this is an IE problem, as I have not experienced it in Firefox.

Anybody tips or hints?

[Apostropartheid]

Preload the images/use only one conjoined image for your backgrounds.

[rogierius]

Originally Posted by Apostropartheid

Preload the images/use only one conjoined image for your backgrounds.

A joined image would be too large (6 x 64 KB) in my opinion.

Preloading is a trick I can use.

I tried implementing this CSS and markup:

<div id="preloader">
	<img src="http://domain.tld/path/images/01.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/02.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/03.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/04.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/05.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/06.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/07.png" width="1" height="1" />
</div>

with this as CSS

	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}

This is what I put into my first page and stylesheet. It is a bit better, and only if the visitor isn't surfing to another page on the website too quickly.

Furthermore, when coming deeper down from the pages, the flashing is reoccuring, the preloading is apparentely only working when background images are loaded from the same path as the used background. When coming from subpages (which are placed in directories), the code would be '../../images/image.jpg' instead of 'images/image.jpg'.

I still feel my CSS is invalid regarding IE7 and IE8. Not many people have the same problem, so it is likely I'm doing something out of the ordinary.

Anybody willing to plow through my CSS to find a solution?

[Apostropartheid]

Use absolute URIs then (either from the domain root or a fully-qualified URI).