Forum Moderators: not2easy
would really appreciate your help with a site im developing.
Im faced with a problem in IE where the images on my page flicker on each page load.
They are the same bg images used in each page and applied with css yet they appear to reload or "flicker" on each page load.
ive tried the following that i found suggested in other threads:
using the meta tag:
<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)">
adding <link> and <script> lines to the <head>
loading the images in a hidden div in the html
none of these have worked.
And strangely there is one page on my site i don't have this problem - The default page. The only difference is that the default page has a flash object embedded in it. If i remove the object then the problem appears on this page as well.
Please help me.. im rather confused
Don't use @link constructions in CSS -> easy way to get FOUC
my css is linked with:
<link rel="stylesheet" href="simplestyle.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
is that the same as @link?
Things to try: merge the two CSS files into one
How large are they ? -> try to get them as small as you can
For background images and the like: sometimes it makes far more sense to use image sprites, also do try to make them smaller.
In the end the speed of your server is also going to be a factor: the slower it is, the mre likely a browser is to start displaying what it already has while some stuff is still loading.
If you have e.g. white text n a dark background image it might make sense to use a dark background color and a dark image: the text will be visible while the image still loads.
If i remove the images and just use bg colours it still flickers so i dont think its the images.
I've been stripping away parts of my code to find whats causing the problem and ive gotten down to such a small amount of code that if i strip away any more ill have nothing left!
I'm still getting the image flicker problem in IE when the page is refreshed or loaded.
the bg image used is very small 1x830px and 831bytes
heres my code:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html Lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)">
<link REL="SHORTCUT ICON" HREF="favicon.png">
<style type="text/css">
html, body {
background: #FFCA68 url(images/bg.jpg) repeat-x;
}
</style>
</head>
<body>
</body>
</html>
please help me.. i don't know what else to try
<!--[if lt IE 7]>
<script type="text/javascript">
//Fix IE6 background image flicker
function fixIE6flicker(fix) {
try {
document.execCommand("BackgroundImageCache", false, fix);
} catch(err) { }
}
window.onload = function() {
fixIE6flicker(true);
}
</script>
<![endif]-->
I don't think it need the transition meta, if this bit of script is used.. but try with both and let us know?
[edited by: SuzyUK at 12:06 pm (utc) on July 8, 2009]
