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

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

Susan Sarandon

Freigeben： 2024-12-08 05:31:10

Original

533 Leute haben es durchsucht

How to Eliminate Flash of Unstyled Content (FOUC)?

Strategien zur Vermeidung von Flash of Unstyled Content

Das Vorhandensein von Unstyled Content (FOUC) kann das Benutzererlebnis auf Webseiten stören. Dieser Artikel befasst sich mit Ansätzen zur Eliminierung von FOUC.

Sofortiges Ausblenden von Elementen mit JavaScript

Das anfängliche Ausblenden von Elementen mit CSS und das anschließende erneute Anzeigen mit JavaScript ist für Benutzer, die JavaScript deaktivieren, problematisch. Ein umfassenderer Ansatz beinhaltet die Verwendung von JavaScript, um Elemente nach dem Laden der Seite sowohl auszublenden als auch wieder anzuzeigen.

Bei Verwendung von jQuery könnte man erwägen, das Body-Element wie folgt auszublenden:

$(document).ready(function() {
    $('body').hide();
    $(window).on('load', function() {
        $('body').show();
    });
});

Nach dem Login kopieren

Diese Methode kann jedoch möglicherweise führen immer noch zu FOUC, wenn die Seite zahlreiche Elemente enthält. Erwägen Sie daher, das HTML-Tag auszublenden, bevor das Dokument vollständig geladen ist:

<html>
  <head>
    <!-- Head content -->
    <style type="text/css">
      .hidden {display:none;}
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');  
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

Nach dem Login kopieren

Beachten Sie, dass die addClass()-Methode außerhalb der .ready()-Methode ausgeführt wird, um das sofortige Ausblenden von Elementen sicherzustellen.

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