Wie kann man Flash of Unstyled Content (FOUC) ohne JavaScript verhindern?-CSS-Tutorial-php.cn

Wie kann man Flash of Unstyled Content (FOUC) ohne JavaScript verhindern?

DDD

Freigeben： 2024-11-14 11:51:02

Original

249 Leute haben es durchsucht

How to Prevent Flash of Unstyled Content (FOUC) Without JavaScript?

Eliminierung des Flash of Unstyled Content

Der Flash of Unstyled Content (FOUC) bezieht sich auf den kurzen Moment, in dem eine Webseite mit ihrem Inhalt erscheint rohe HTML-Elemente, bevor die CSS-Stile angewendet werden. Dieser störende Effekt kann sich negativ auf die Benutzererfahrung auswirken.

Lösung: Verwendung von JavaScript

Eine gängige Lösung besteht darin, Elemente zunächst mithilfe von CSS auszublenden und sie dann mithilfe von JavaScript wieder einzublenden, sobald sie geöffnet sind Seite lädt. Dieser Ansatz kann jedoch für Benutzer problematisch sein, die JavaScript deaktiviert haben.

Ein besserer Ansatz: Das HTML-Element ausblenden

Anstatt einzelne Elemente auszublenden, ist dies ein effektiverer Ansatz besteht darin, das gesamte HTML-Element mithilfe von JavaScript auszublenden. Dies kann erreicht werden, indem dem HTML-Tag im -Tag eine versteckte Klasse hinzugefügt wird. Abschnitt:

<html>
  <head>
    <style type="text/css">
      .hidden { display: none; }
    </style>
    <!-- ... -->
  </head>
  <body>
    <!-- Body Content -->
  </body>
</html>

Nach dem Login kopieren

Im JavaScript-Code wird die Methode addClass() verwendet, um das HTML-Element auszublenden, bevor das Dokument fertig ist:

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

Nach dem Login kopieren

Sobald die Seite geladen ist (bzw Das Dokument ist fertig), das HTML-Element wird sichtbar gemacht:

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

Nach dem Login kopieren

Durch das Ausblenden des HTML-Elements werden auch alle seine untergeordneten Elemente ausgeblendet, wodurch jegliches FOUC verhindert wird. Beachten Sie, dass die Methode addClass() außerhalb der Funktion .ready() aufgerufen werden sollte, damit dieser Ansatz effektiv funktioniert.

Das obige ist der detaillierte Inhalt vonWie kann man Flash of Unstyled Content (FOUC) ohne JavaScript verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!