[CSS] Bild preload

Zuyas

Hallo, ich habe oben im <head> meiner Seite eine style.css eingebungen, in dieser habe ich unter anderem einen hover effekte für einen Button gemacht:

.go{
  background-image:url(./images/menu_mid_go_animiert/menu_mid_go_0.png);
  width:60px;
  height:50px;
  display:block;
}
.go:hover, .go:focus{
  background-image:url(./images/menu_mid_go_animiert/menu_mid_go_2.gif);
}

.go:active{
  background-image:url(./images/menu_mid_go_animiert/menu_mid_go_1.png);
}

Funktioniert super, nur es blinkt beim ersten mal schwarz (weil das andere Bild noch nicht geladen wurde) wie kann ich das umgehen? Also dass das Bild schon vorher geladen aber nicht angezeigt wird?

Gruß

PRIEST

<style type="text/css">
<!--
.preload {
  display:none; // oder  visibility:hidden;
  width:0px;
  height:0px;
}
-->
</style>

<img class="preload" src="bildname.jpg"  />

z.B.

Zuyas

Danke für die Antwort, funktioniert aber leider nicht. Kommt zwar kein Fehler aber es blinkt trotzdem beim ersten mal schwarz

PRIEST

hm müsste aber funktionieren. Was benutzt du denn für einen Browser und ein caching is an oder?

Zuyas

Hab Firefox und hab caching is an.

Shade Of Mine

Ich tue immer nur per JavaScript preloaden.

Reines CSS preload geht aber so: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

Zuyas

Ok, danke euch beiden! Liegt wohl an meinen Browsereinstellungen, bei meinen Betatestern funktionierts super

PRIEST

Shade Of Mine schrieb:

Ich tue immer nur per JavaScript preloaden.

Reines CSS preload geht aber so: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

jo is die coolere lösung