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

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 :

  
    ...
    <style>
      .hidden { display: none; }
    </style>
    ...
    <script>
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    </script>
  
  
    ...
  

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!