Wie kann der Flash of Unstyled Content (FOUC) eliminiert werden?-CSS-Tutorial-php.cn

Inhaltsverzeichnis

Bekämpfung des Flash of Unstyled Content

Heim

Web-Frontend

CSS-Tutorial

Wie kann der Flash of Unstyled Content (FOUC) eliminiert werden?

Nov 22, 2024 pm 05:29 PM

How to Eliminate the Flash of Unstyled Content (FOUC)?

Bekämpfung des Flash of Unstyled Content

Das unerwünschte Erscheinen von unstyled Content beim Laden einer Webseite ist ein häufiges Problem, das als Flash of Unstyled Content (FOUC) bekannt ist ). Dieser kurze Artikel befasst sich mit diesem Problem und seiner Lösung.

Der traditionelle Ansatz, Seitenelemente mit CSS zu verbergen und sie anschließend mit JavaScript sichtbar zu machen, ist problematisch. Dies beeinträchtigt die Benutzerfreundlichkeit der Website für Benutzer mit deaktiviertem JavaScript.

Um dies zu umgehen, wird empfohlen, JavaScript zu verwenden, um Elemente nach dem Laden der Seite sowohl auszublenden als auch anzuzeigen. Während jQuery eine erste Lösung bietet, ist es möglicherweise nicht schnell genug, um FOUC für größere Seiten zu vermeiden.

Eine effektivere Technik besteht darin, das HTML-Tag mit JavaScript auszublenden, bevor die Seite gerendert wird, was eine schnelle Verdeckung bei der Skriptausführung ermöglicht :

&lt;html&gt;
  &lt;head&gt;
    ...
    &lt;style&gt;
      .hidden { display: none; }
    &lt;/style&gt;
    ...
    &lt;script&gt;
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    ...
  &lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Bei diesem Ansatz wird die Funktion addClass() von jQuery außerhalb der Methode .on('load') aufgerufen, um sicherzustellen, dass das HTML-Tag verborgen ist sofort.

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn