PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : IE und das aufblitzen von Hintergründen! Kann man das unterdrücken?

Onlinejunky
2008-02-10, 12:15:19
Hallo,

mir ist aufgefallen, dass im IE die Hintergründe unserer Website aufblitzen wenn man auf eine neue Seite wechselt.

In allen anderen Browser ist das nicht der Fall. Anscheinend warten die anderen Browser bis sie alle Infos haben und der IE stellt alles gleich da und holt sich alles wie er gerade will.

Gibt es eine Funktion, um den IE zu zwingen erst die Seite darzustellen, wenn alles geladen ist? Das wäre echt super.

Gruß

Ich habe hier was gefunden:

Vermeiden Sie den “Flash of Unstyled Content” (FOUC) im IE

Wenn Sie zum Einbinden Ihrer externen Stylesheets ausschließlich @import verwenden, werden Sie früher oder später feststellen, dass beim Aufruf Ihrer Seite im IE das Dokument kurz unformatiert “aufblitzt”, bevor die CSS-Datei geladen wird. Das kann vermieden werden
(Anmerkung: Dieser Effekt tritt dann nicht auf, wenn vor dem importierten Stylesheet ein weiteres per eingebunden wurde.
Gibt es allerdings keine Styles per einzubinden, z.B. weil man den NS4.x ohne Styles lassen möchte, dann kann man ein leeres Stylesheet mit nur einer Kommentarzeile per einbinden. Für den NS4.x ändert sich dadurch nichts, der FOUC tritt jedoch nicht mehr auf.)


Fragt sich nur, was ich jetzt machen muss
Onlinejunky
2008-02-10, 12:44:44
Anscheinend ist das ein Bug im IE.

Fouc Internet Explorer - Flash Of Unstyled Content

Wird im IE das erste Stylesheet mit @import eingebunden, kommt es zu einer häßlichen Erscheinung: beim Laden wird zunächst die vollkommen ungestaltete Seite angezeigt und erst dann durch die CSS-formatierte ersetzt. Man kann diesen Bug umgehen, indem man als erstes eine CSS-Datei, und sei es nur eine Dummy-Datei, mit link rel aufruft.

Weitere Informationen dazu bei CSS-Technik oder umfangreicher und auf englisch bei BlueRobot.
creave
2008-02-10, 13:49:43
Also es gibt 2 Möglichkeiten, Stylesheets einzubinden:

Die HTML-Variante: <link rel="stylesheet" type="text/css" href="style.css">
Die CSS-Variante in HTML: <style type="text/css"> @import("style.css"); </style>


So wie ich deinen Text verstanden habe, tritt der Bug nur bei der CSS-Variante ein (und das nur, solange nicht zuvor per link-rel aufgerufen wurde). Entweder du verzichtest auf diese CSS-Variante, oder machst es wie dort beschrieben - erst per link-rel eine dummy.css aufrufen, dann Import nutzen.


<link rel="stylesheet" type="text/css" href="dummy.css">
<style type="text/css">
@import("style.css");
</style>
Onlinejunky
2008-02-10, 13:55:51
Leider habe ich gerade gesehen, dass es gar nicht über @import eingebunden ist sondern normal.

Aber es muss trotzdem das Problem sein. Ich probiere es jetzt mal mit der dummy css und binde die zuerst ein.


Gruß
darph
2008-02-10, 14:15:11
Einfach vor dem CSS einen leeren Javascript-Tag setzen.

How do I vanquish the FOUC? (How do I fix it?)

Just one LINK element or SCRIPT element inside a document's HEAD element will prevent a flash of unstyled content.


<head>
<title>My Page</title>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>

http://bluerobot.com/web/css/fouc.asp/


Keine Dummydateien, keine zusätzliche Serverlast.
Onlinejunky
2008-02-10, 14:19:30
Hi,

das aufblitzen der Grafiken und Hintergründe im IE liegt nicht an der CSS Datei.

Selbst wenn ich die komplett rausnehme, die Seite so anschaue (dann ist natürlich alles verhauen) blitzen die Grafiken auf, wenn ich auf Reload drücke-

Was in den anderen Browser nicht der Fall ist. Das macht mich wahnsinnig dieser IE. Ich verstehe nicht, dass den so viel nutzen.

gruß
darph
2008-02-10, 14:25:47
Mach mal ein Video.
Onlinejunky
2008-02-10, 14:41:57
Ich denke nicht, dass ein Video notwendig ist.

Also ich bin der Meinung, dass er daran liegen muss, dass der IE nicht alles zusammen komplett lädt sondern alles einzeln. Deswegen enstehen diese Blitz Effekte, ist ja auch logisch.

Etwas das einheitlich dargestellt wird, sieht sauber aus. Wenn aber 3 Bilder in verschiedenen Zeiten geladen werden dann entsteht eine Unregelmäßigkeit und das nervt und ist auch sichtbar.

Gibt es ein Javascript, mit dem ich den IE zwingen kann, erst die Seite darzustellen, wenn alles da ist bzw. die Seite als Einheit darzustellen, so sie es die anderen Browser alle machen.

Guß
creave
2008-02-10, 14:53:46
Der Firefox macht dies aber auch nicht anders... schau dir mal grafiklastige Seiten an, bei genauem Betrachten sieht man auch einen abfolgenden Aufbau.
Onlinejunky
2008-02-10, 15:00:44
Hi,

ja das du schon recht aber wenn alles im Cache ist und man dann auf Reload drückt, dann zeigen FF, Opera und Safari alles sauber auf einmal an, während beim IE eben die ganzen Grafiken kurz aufblitzen.

Gruß

Edit: Wenn du z.B. auf Google gehst mit em IE und Reload drückst, dann blitz es auch kurz auf, was im FF nicht der Fall ist.
Wenn jetzt jede Seite anders aussieht fällt das nicht so auf. Wenn die Seite aber immer nach dem gleich Prinzip aufgebaut ist, blitzen immer die selber Grafiken wieder auf.

Ich meine, ich nutze den IE nicht aber leider immer noch über 70% aller User.


Es muss doch eine Möglichkeit geben, dass irgendwie in den Griff zu bekommen.
Onlinejunky
2008-02-10, 15:31:07
Hier mal ein vergleich, ist jetzt einfach ein beliebige Seite:

http://www.m-stroeder.de/index.htm

Jetzt ein paar mal auf Reload drücken mit IE und FF und dann könnt ihr sehen was ich meine mit dem aufblitzen.
Ich verstehe nicht, warum der das so macht, wenn er doch alles im Cache hat. Die anderen Browser können das doch auch.


Gruß