Précharger l'image CSS

Question

J'ai un problème avec une image préchargée sur Firefox. Sur (webkit) Chrome/Safari, ça a l'air bien.

Jetons un coup d'œil.

J'ai :hover image charge le fichier 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;} 

et HTML

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

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

Pourquoi pas Firefox charger l'image à partir du cache, plutôt que du serveur?

Comment puis-je résoudre ce problème?

Answer 1

Dans la mesure du possible, n'utilisez pas deux images. Utilisez la technique CSS Sprites. Ensuite, vous opérez simplement sur la propriété background-position au lieu de différentes images.

Answer 2

Ou vous pouvez essayer d'utiliser la fonction jQuery preloadCssImages, cela s'assurera que vos images sont chargées dans le cache avant d'afficher et de rendre ainsi votre page beaucoup plus lisse;

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