Logo coldheat - Weblog von Christian Mücke

Seitenleiste einblenden

  • Archiv
  • Layouts
  • 100 Filme
  • Uniques
  • Impressum
jQuery – Flash of Unstyled Content
  • Fr, 13. März 2009
  • 0 Kommentare

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.

  • Schlagwörter:
  • CSS,
  • jQuery,
  • Tutorial,
  • Website.

Zum gleichen Thema

  • Bin fast da
    Bin fast da
  • die Woche im kurzen Abriss
    die Woche im kurzen Abriss
  • Royal Premium Deluxe
    Royal Premium Deluxe
  • Archive aufgeräumt und aufgewertet
    Archive aufgeräumt und aufgewertet
  • 2 Jahre Blogformat
    2 Jahre Blogformat
  • 1024.1 - Dokumentation zur neuen Gestaltung
    1024.1 - Dokumentation zur neuen Gestaltung

0 Kommentare

Für diesen Eintrag wurden die Kommentare geschlossen.

Kommentare geschlossen.

CC © 2022 C.Mücke Datenschutzerklärung Zurück zum Seitenanfang