How to Eliminate Flash of Unstyled Content (FOUC)?-CSS Tutorial-php.cn

How to Eliminate Flash of Unstyled Content (FOUC)?

Susan Sarandon

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

Original

533 people have browsed it

How to Eliminate Flash of Unstyled Content (FOUC)?

Strategies to Avoid Flash of Unstyled Content

The presence of unstyled content (FOUC) can disrupt the user experience on web pages. This article delves into approaches to eliminate FOUC.

Immediate Element Hiding with JavaScript

Initially hiding elements with CSS and subsequent redisplaying with JavaScript is problematic for users who disable JavaScript. A more comprehensive approach involves using JavaScript to both hide and redisplay elements after page load.

Using jQuery, one might consider hiding the body element like so:

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

Copy after login

However, this method may still result in FOUC if the page contains numerous elements. Therefore, consider hiding the HTML tag before the document is fully loaded:

<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>

Copy after login

Note that the addClass() method is executed outside the .ready() method to ensure immediate element hiding.

The above is the detailed content of How to Eliminate Flash of Unstyled Content (FOUC)?. For more information, please follow other related articles on the PHP Chinese website!