Preload von .GIF

[Einbaukueche]

Hallo Allerseits,

folgendes: Ich nutze eine horizontale Navigationsleiste. Jedes Element hat sein eigenes .JPG.
Mittels hover soll ein .GIF angezeigt werden (der Button wird größer). An für sich kein Problem:

#main_nav_list a.main_nav_item1:hover  
{  
background: url(images/button/leistungen.gif) no-repeat;  
font-family: Tahoma,Verdana, Arial, sans-serif;  
font-style: normal;  
font-size: 11px;  
font-weight: bold;  
text-decoration: none;  
color: #6D0000;  
background-position: top right;  
}

Problem: geht man mit dem Mauszeiger nun auf ein Element, wird kurz nichts angezeigt, da das .GIF noch nicht im Cache liegt, es wird also erst geladen und anschließend angezeigt.
Nun dachte ich, ich umgehe dies, indem ich die .GIF's in jeder Seite bereits "anzeige" und die dank CSS ausblende:

#hidepics  
{  
width:0px;  
height:0px;  
visibility:hidden;  
}

<img class="hidepics" src="css/images/button/kontakt.gif">  
<img class="hidepics" src="css/images/button/leistungen.gif">  
<img class="hidepics" src="css/images/button/person.gif">  
<img class="hidepics" src="css/images/button/projekte.gif">

Nun ist die "schwarze Unterbrechung" weg - dafür wird das .GIF nicht mehr animiert angezeigt!
Was mache ich falsch?

Grüße, Tischler