jQuery – Flash of Unstyled Content

jQuery – Flash of Unstyled Content

Seit Ewigkeiten mal wieder ein winziges Tutorial von mir zur Lösung eines durchaus nervigen kleinen Problems. Nutzt man jQuery im großen Stil mit dynamisch geladenen Inhalten und aufwendigerem CSS, kann es zum Effekt kommen, den man Flash of unstyled Content nennt. Der Browser lädt Inhalte, die noch nicht vollständig mit Stilen und Klassen versehen sind und zeigt somit Inhalte in falscher Form an. Mein Archiv war hier ein Musterbeispiel, welches mittlerweile aber ausgebessert ist. Zugegeben nur ein Schönheitsfehler aber einer, der sich ganz einfach beheben lässt.

Ich bin nicht der Erste, der dieses Problem versucht zu lösen. Wer danach googled wird viele Lösungen finden. Auch ich habe nur eine Lösung zu meiner gemacht. Zwei Vorrausettzungen sind zu erfüllen. Zum einen möchte ich so wenig zusätzlichen Quellcode und zum anderen solle es eine pure Javaskript-Lösung sein, die Nutzer mit deaktiviertem Javaskript ignoriert. Im schlimmsten Fall versteckt man mit CSS Elemente, die nur angezeigt werden, wenn Javaskript aktiv ist. Diesen Fall möchte man vermeiden.

Grundsätzlich laufen alle Lösungen nach dem gleichen Prinzip. Beim Laden der Seite werden ungestylte Elemente versteckt und nach dem jQuery seinen Zauber hat wirken lassen, zeigt man diese Elemente wieder an. jQuery selbst bietet dafür nicht grundlos eine document.ready-Funktion, die praktisch dafür geschaffen ist. Wir brauchen 2 Zeilen jQuery und 1 Zeile CSS.

Die Javaskript-Frage koppeln wir an die CSS-Regel, die somit nur greift, wenn Javaskript aktiv ist. Dafür schlägt learningJQuery das HTML-Tag vor. Also verpasst man diesem Tag einfach eine neue CSS-Klasse/ID:

    $('html').addClass('js');

basiert darauf CSS, um das gewünschte Element zu verstecken

    .js #zuVersteckendesElement {display: none;}

und entfernt die .js-Klasse vom HTML-Tag, wenn das Dokument fertig geladen ist:

    $(document).ready(function(){
        $('html').removeClass('js');
    });

Was hier passiert ist schnell und einfach beschrieben:

  1. Dokument beginnt zu laden
  2. .js-Klasse wird HTML-Tag zugewiesen
  3. CSS-Klasse greift somit und versteckt das gerade geladene Element
  4. Dokument ist fertig geladen und strukturiert
  5. .js-Klasse wird entfernt
  6. Element erscheint auf der Seite

Das ist mal wirklich einfach. Kleine Probleme kann es geben, wenn man verschiedene jQuery-Module mit der Lösung kombiniert, was mir im Archiv passiert ist. Hier habe ich etwas rumgedoktort, wie die CSS-Regel aussehen muss, damit das Element versteckt, das jQuery-Tabs aber nicht beeinflusst werden. Abgesehen davon, eine sehr elegante Lösung.