Will Bilder im voraus laden?

  • Hallo.

    Ich verwende auf einer HTML-Seite zwei Bilder um einen Button mit einem hoover-Effekt zu erzeugen. Wenn die Maus über den Button fährt wird das zweite Bild angezeigt damit es so aussieht als ob der Button sich ein Stück nach hinten drückt.

    Wenn die Seite das aller erste mal von einem Browser angezeigt wird so ist folgender Effekt zu sehen. Die Maus bewegt sich also Richtung Button und sobald der Mauscursor auf dem Button ist verschwindet der Button für sagen wir eine viertel Sekunde (weises Viereck zu sehen) und erst dann wird das zweite Bild des Buttons angezeigt. Ich glaube es liegt daran das es halt eine viertel Sekunde dauert bis das das zweite Button-Bild aus dem Internet geladen ist. Das Bild wird also erst geladen wenn der Cursor den Button berührt und das Bild gebraucht (angefordert) wird. In der Zwischenzeit ist keines der Button-Bilder zu sehen also einfach nur der Weise Hintergrund der Seite.

    [FONT=&quot]Gibt es die Möglichkeit das zweite Button-Bild schon zu laden bevor es eigentlich gebraucht wird?

    sinalko 
    [/FONT]

  • Die vermutlich einfachste Lösung für dich wäre irgendwo am Ende deines quelltextes das bild zu setzen und höhe und breite auf 1px setzen. So wird das bild geladen sollte aber nicht zu sehen sein.

    also <img src="./bildordner/deinbild.gif" width="1px" height="1px" />

    Gruß

    J32

  • hi,
    also ich löse dieses Problem immer so:
    Ich setze für jedes Bild welches geladen werden soll das in den code ein.

    HTML
    <img src="../img/lala_hover.jpg" style="display: none;">
  • wohl durchaus die bessere Variante von Trigger hier...habsch gar nicht dran gedacht.

    J32

  • ansonsten kann man auch alle bilder in einen container packen und dann nen display:none oder nen negativen wert für magin-top oder margin-left auf den container geben.
    oder das ganze in einer pre-load-funktion vorladen