Wird die .png vorgeladen?

[ProAWX]

Hey Community,

ich hab mal eine Frage zu meinem CSS Code. Ich habe eine Farbbox. Wenn man auf diese Farbbox mit der Maus geht, erscheint eine kleine schwarze Box mit Text (in Form einer transparenten .png).
Ich wüsste gerne ob die png beim Laden der Website mitgeladen wird, ich glaube nämlich nicht. Ich denke sie wird erst geladen wenn der Rollover stattfindet. Praktisch kann ich das nicht wirklich testen weil ich eine sehr schenlle Internetanbindung hab und die png sehr klein ist, aber als DSL1000 oder ISDN user würde man das sicherlich merken. Deshalb frage ich einfach mal technisch an, ob ein Preload statt findet oder nicht!

Hier der Code für den Link:

a.about {
display: block;
width: 516px;
height: 84px;
background-color: #c21414;
}

a.about:hover {
background-image: url(img/about.png);
}

 

[bezierkurve]

Ich denke sie wird erst geladen wenn der Rollover stattfindet.

Korrekt.

 

[ProAWX]

Was kann ich dagegen tun? Vielleicht eine doppelt so große PNG erstellen und die per Hintergrund verschiebung als Rollover nutzen?

 

[bezierkurve]

Genau, bau sie in ein Bild ein, das bereits im Ursprungszustand sichtbar ist; ist imho der eleganteste Weg.

 

[ProAWX]

a.about {
display: block;
width: 516px;
height: 84px;
background-color: #c21414;
background-image: url(img/about.png);
}

a.about:hover {
background-position: 0 -84px;

funktioniert gut so danke

 

[bezierkurve]

PS: Wann welche Daten geladen werden, kannst du dir in Safari ganz bequem über die „Webinformationen“ im Menü „Develop“ anzeigen (das Menü musst du in den Einstellungen unter „Erweitert“ aktivieren).

Und für Firefox kannst du für diesen Zweck die Erweiterung Firebug verwenden.

 

[gKar]

Eine andere Möglichkeit, ohne die Grafik verändern und um eine feste Pixelzahl verschieben zu müssen, wäre das Einfügen der Grafik unsichtbar in den Content, um ein Preloading auzulösen. Z.B. wie folgt:
<img src=".....png" width="0" height="0" alt="">

Das sorgt dafür, dass die Grafik mit dem Dokument zusammen geladen wird, jedoch an der Stelle im Dokument nicht sichtbar ist. Wird sie nun noch an anderen Stellen dynamisch eingeblendet, ist sie schon gecached und muss nicht mehr nachgeladen werden.

 

[Slashwalker]

Eine andere Möglichkeit, ohne die Grafik verändern und um eine feste Pixelzahl verschieben zu müssen, wäre das Einfügen der Grafik unsichtbar in den Content, um ein Preloading auzulösen. Z.B. wie folgt:
<img src=".....png" width="0" height="0" alt="">

Das sorgt dafür, dass die Grafik mit dem Dokument zusammen geladen wird, jedoch an der Stelle im Dokument nicht sichtbar ist. Wird sie nun noch an anderen Stellen dynamisch eingeblendet, ist sie schon gecached und muss nicht mehr nachgeladen werden.

Die saubere Lösung, via CSS Sprites, wurde doch schon erfolgreich umgesetzt. Eine Lösung, mit zusätzlichem, nicht sichtbarem Markup halte ich persönlich für Pfusch.