Preload von .GIF

[Der Martin]

Hi,

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.

würde ich nicht als Problem bezeichnen; "des isch halt so".

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

Du hast vergessen, zwei wichtige Aspekte zu erwähnen, die ich aus der Beschreibung nur vermute:
 1. Es handelt sich um animierte GIFs
 2. Die Animation läuft nur einmal, nicht endlos

Und in diesem Fall hast du deine Zwickmühle: Die Animation läuft einmal nach dem Laden der GIFs ab, während die Bilder unsichtbar sind. Werden sie nun eingeblendet, ist die Animation längst abgelaufen und die GIFs zeigen statisch das letzte Einzelbild.

Zwei mögliche Lösungen:
 a) Verzichte auf Preloading und nimm die kurze Verzögerung beim ersten Hovern in Kauf.
 b) Verzichte auf den Animationseffekt.

Übrigens:

#hidepics

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

> ~~~html

<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">

CSS und Markup passen nicht zusammen. Du legst Eigenschaften für ein Element mit der ID "hidepics" fest, verwendest im HTML aber stattdessen eine Klasse "hidepics".

Ciao,
 Martin