Preload bei Hover-Images

Sobald man innerhalb von Webseiten Bilder verwendet, welche beim Überfahren mit der Maus wechseln sollen, so triff häufig ein ungewünschter Nebeneffekt auf. Anstatt das Hover-Bild anzuzeigen, verschwindet lediglich das normale Bild. Erst nach einer geringen zeitlichen Verzögerung wird das Hover-Bild angezeigt.

Weshalb tritt dieser Effekt auf?

Beim Laden eines Webdokumentes, z.B. einer XHTML-Datei, werden zuerst alle benötigten Elemente, z.B. Texte, Bilder, Videos, etc., vom Server an den Client übertragen. Da die Bilder, welche für den Hover verwendet werden, i.d.R. nicht im Dokument eingebunden sind, müssen diese später bei Bedarf nachgeladen werden. Auf Grund des Nachladens ist nun für einen kurzen Augenblick überhaupt kein Bild zu sehen.

Wie löst man dieses Problem?

Am besten löst man dieses Problem, indem man die Hover-Images in die Homepage, d.h. die erste Seite eines Webs, einbindet. Dadurch wird sichergestellt, dass die Bilder bereits beim ersten Laden der Seite an den Client übertragen werden. 

Vernünftigerweise erstellt man dazu einen DIV-Container, welchen man weit außerhalb des sichtbaren Bereiches positioniert.

XHTML Part:

<div id="hidden">
    <img src="./images/aktuelles_aktiv.png" alt="Aktuelles">
    <img src="./images/tipps-und-tricks_aktiv.png" alt="Tipps und Tricks">
    <img src="./images/philosophie_aktiv.png" alt="Philosophie">
</div>

CSS Part:

#hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

 

Tags: Tipps und Tricks

Erstellt am 19.11.2008 von Niels Lange in Tipps und Tricks

Nach oben

Nach oben

Nach oben