CSS Background-image lädt bei aktivieren des Tabs neu

[Blackbenji]

Hallo,

ich habe für einen Bereich ein Hintergrundbild gewählt, welches sich seitlich wiederholen soll:

#top-header {
    background:#93EEAA;
    height:110px;
    margin-bottom:14px;
    background-image: url(../img/header.png);
    background-repeat: repeat-x;
    border-bottom: solid 1px #000;
}

Wenn ich den Tab mit der Seite etwas "liegen lasse", also neben bei in anderen Tabs surfe, wird nach neuer aktivierung erst die Hintergrundfarbe und dann das Bild gezeigt. Dieser Effekt ist zwar nur 1-2 Sekunden so, dennoch nervig.

Habe ich hier einen Fehler? Wenn ja, wie kann man es hier debuggen bzw lösen?

 

[Morpheus3k]

Tritt das Verhalten beim Firefox auf?

 

[Blackbenji]

ja unter firefox 17.0.1 - mac os x 10.8.2

 

[Morpheus3k]

ja, das liegt nicht am CSS Code, sondern an den Optimierungen von Firefox.
Firefox entfernt alle decodierten Bilder aus dem Speicher, wenn ein Tab einige Zeit inaktiv ist, um Speicher zu sparen. Wenn du dann den Tab aktivierst, muss der Browser das Bild neu decodieren und das dauert (je nach Rechnerleistung) einige Millisekunden. Wenn dann das Bild ziemlich groß ist, fällt das dann beim aktivieren des Tabs auf.

 

[Blackbenji]

danke, das habe ich mir fasst schon gedacht.
gibt es eine grenze für die größe oder ist das dann noch abhängig von den geöffneten tabs ?

 

[Morpheus3k]

Die genaue Implementierung in Firefox kenn ich auch nicht. Ich weiß nur, dass sie diese Optimierung vor einigen Versionen implementiert haben.
Soweit ich das verstanden habe, ist es nur abhängig von der Zeit, wie lange ein Tab inaktiv ist. Der Effekt sieht man, wie schon gesagt, eigentlich nur bei recht großen Bildern. Da diese aus dem Cache geladen, decodiert und anschließend auf der Webseite gerendert wird.