...

View Full Version : Could some have a look at this?



rogierius
06-04-2010, 03:24 PM
Hello again.

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

Please have a look (http://tinyurl.com/33btv38) 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 (http://www.sitepoint.com/forums/showthread.php?t=584501) and 2 (http://www.webmasterworld.com/css/3662705.htm) and a small discussion here (http://stackoverflow.com/questions/1060393/ie8-flashes-when-reloading-perhaps-an-internal-ie-bug-recent-issue)), 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
06-04-2010, 03:57 PM
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
06-04-2010, 04:47 PM
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
06-07-2010, 11:16 AM
A bump because the problem of the background image flash/flicker is still there.

I can't get it to load smoothly (http://tinyurl.com/33btv38) in IE7 and IE8.
On my girlfriends laptop, the background image (http://www.cheekeyes.com/shadow/images/background_image_contact1.jpg) (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
06-07-2010, 05:36 PM
Preload the images/use only one conjoined image for your backgrounds.

rogierius
06-07-2010, 08:43 PM
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 (http://perishablepress.com/press/2009/01/18/css-image-caching/):


<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
06-07-2010, 09:53 PM
Use absolute URIs then (either from the domain root or a fully-qualified URI).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum