Preload image CSS

Question

Hi I have problem with a preloaded image on Firefox. On (webkit) Chrome/Safari it looks fine.

Let's take a look.

I have :hover load image the css file:

.zz{background:url(../img/guzik_01_ofirmie_PL_A.png) no-repeat; height: 1px; width: 1px; position:absolute; } 

li#ofirmie{background:url(../img/guzik_01_ofirmie_PL_B.png) no-repeat; height: 44px; width: 108px; position: absolute; z-index: 1000;}

ul.menu li#ofirmie:hover {background:url(../img/guzik_01_ofirmie_PL_A.png) no-repeat; height: 44px; width: 108px; position:absolute;}

and HTML

<div class="zz"></div>

<li id="ofirmie" ></li>

Why doesn't Firefox load the image from the cache, rather than from server?

How can I fix it?

Answer 1

As long as it's possible don't use two images. Use CSS Sprites technique. Then you just operate on background-position property instead of different images.

Answer 2

Or you can try using the jQuery preloadCssImages function, this will make sure your images are loaded into the cache before displaying and thus making your page much smoother;

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/