Preload image CSS

Question

У меня проблема с предварительно загруженным изображением на Firefox. На (webkit) Chrome/Safari это выглядит отлично.

Давайте посмотрим.

У меня есть :hover загрузить изображение CSS-файл:

.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;} 

и HTML

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

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

Почему не Firefox загружает изображение из кэша, а не с сервера?

Как это исправить?

Answer 1

До тех пор, пока это возможно, не используйте два изображения. Используйте метод CSS Sprites. Затем вы просто используете свойство background-position вместо разных изображений.

Answer 2

Или вы можете попробовать использовать функцию preloadCssImages jQuery, это позволит убедиться, что ваши изображения загружены в кеш перед отображением и тем самым сделать вашу страницу более гладкой;

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