CSS-ImageRollOverPreload-Trick

Ich habe auf dieser Seite einen simplen Trick verwendet, um zu verhindern, dass die RollOver-Effekte auf den »Reiterchen« der Hauptnavigation böse flackern, wenn man mit der Maus darüber fährt.

#reiter li a:hover {
background-image: url("/layout/doorrechts-hov.gif");
text-decoration: none;
color: black;
}

Das hat zur Folge, dass der Browser das Bild erst dann zu laden beginnt, wenn es eigentlich schon zu spät ist: Wenn der User mit der Maus über eine der Navigations-Reiter fährt. Das ursprüngliche Bild verschwindet, aber das neue Bild muss erst noch geladen werden, was per Modem leider über eine Sekunde dauern kann.

#inhalt {
clear: both;
background: white
url("/layout/doorrechts-hov.gif") no-repeat -1000px -1000px; /* Preload-Hack */
}

Ist kein echter Hack. Und ist auch nicht elegant. Aber es wirkt!