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

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();
    });
});

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:

  
    <!-- 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>
   
   
   <!-- Body Content -->
   

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!