Forum Moderators: not2easy
Although I tried every trick, my background images for my main menu are not preloading... hence it flickers on first attempt. This is because the browser request the image... You'll have to Force refresh or clear cache to see it again.
But if you have Firebug net panel open, you will see that the images WERE already loaded... and that your roll over will trigger the request again.
So why can't I get those background images to load?!
Please see the following page:
<snip>
thanks for your help!
[edited by: swa66 at 7:02 pm (utc) on Nov. 2, 2009]
[edit reason] No links, please see ToS and Forum Charter. [/edit]
2-if you force refresh you don't see the flicker? I guess it's your 16MB connection, because I have a 7MB here, and I do see it flicker on multiple computers... and it's a killer on 700k
thanks!
[edited by: swa66 at 7:34 pm (utc) on Nov. 2, 2009]
[edit reason] ToS #24 [webmasterworld.com] [/edit]
I would hope NOT to see the flicker on roll-over. (which happens only the first time). thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#nav_portfolio { width:320px; height:138px; background:url(http://www.google.com/logos/clickortreat1.gif) no-repeat; display:block; cursor:pointer;}
#nav_portfolio:hover { width:320px; height:138px; background:url(http://www.google.com/logos/clickortreat2.gif) no-repeat; display:block; cursor:pointer;}
</style>
</head>
<body>
<div id="header">
<div class="navigators">
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a id="nav_portfolio" href="#"></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var myimages = new Array();
function preloading(){
for (x=0; x<preloading.arguments.length; x++){
myimages[x] = new Image();
myimages[x].src = preloading.arguments[x];
}
}
preloading("http://www.google.com/logos/clickortreat2.gif");
// -->
</script>
</body>
</html>
What browser is causing you trouble ?
Try removing all style from the :hover except for what changes (the background-image)
I always use CSS sprites for this: they are always loaded and never flicker.
where I would expect
http://www.google.com/logos/clickortreat1.gif
http://www.google.com/logos/clickortreat2.gif
2-Firefox 354, Safari 4, IE 6, IE7, IE8
In Firebug... you'll see that clickortreat1.gif is called (by the CSS), then clickortreat2.gif is called by the javascript
then when I roll over, clickortreat2.gif is called AGAIN by the hover CSS.
any help?
thanks!
[edited by: swa66 at 1:47 pm (utc) on Nov. 3, 2009]
[edit reason] unlinking [/edit]
So really, javascript or not, my image does not preload. I can't believe it.
#nav_portfolio:hover { width:320px; height:138px; background:url(http://www.google.com/logos/clickortreat2.gif) no-repeat; display:block; cursor:pointer;}
#nav_portfolio:hover { background-image:url(http://www.google.com/logos/clickortreat2.gif);}
You really only need that portion anyway.
Notice I'm not using the shorthand background, but the more specific background0image which does not reset all other background values to their default.
If that's not doing it,
Try using CSS sprites:
- glue both your images into one larger image (let's say one above the other)
- only change the position of the background image on the :hover
It's really the better solution anyway.
1-I please the secondary image in the layout so both images show. STILL, when I roll-over the first time, I still get a network access for the hove image. This is incredible. Please look at this, thanks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" /><style type="text/css">
#nav_portfolio { width:320px; height:138px; background-image:url(http://www.google.com/logos/clickortreat1.gif); background-repeat:no-repeat; display:block;}
#nav_portfolio:hover { background-image:url(http://www.google.com/logos/clickortreat2.gif);}
</style>
</head>
<body>
<a id="nav_portfolio" href="#"></a>
<img src="http://www.google.com/logos/clickortreat2.gif" />
</body>
</html>
I am wondering why my page request the clickortreat2.gif image AGAIN on #nav_portfolio:hover.
It's already downloaded... why request it again?!
thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#nav_portfolio {background-image:url('http://www.example.com/clickortreat1.gif'); width:320px; height:138px; display:block;}
#nav_portfolio:hover {background-image:url('http://www.example.com/clickortreat2.gif');}
</style>
</head>
<body>
<p>
<a id="nav_portfolio" href="#"></a>
<br/>
<img src="http://www.example.com/clickortreat2.gif" alt="" />
</p>
</body>
</html>
[edited by: swa66 at 2:56 pm (utc) on Nov. 3, 2009]
[edit reason] No personal URLs, please see ToS and Forum Charter. [/edit]
