How to Prevent Flash of Unstyled Content (FOUC) Without JavaScript?

Eliminating the Flash of Unstyled Content

The flash of unstyled content (FOUC) refers to the brief moment when a web page appears with its raw HTML elements before the CSS styles are applied. This jarring effect can negatively impact the user experience.

Solution: Using JavaScript

A common solution involves initially hiding elements using CSS and then using JavaScript to unhide them once the page loads. However, this approach can be problematic for users who have JavaScript disabled.

A Better Approach: Hiding the HTML Element

Instead of hiding individual elements, a more effective approach is to hide the entire HTML element using JavaScript. This can be achieved by adding a hidden class to the HTML tag in the

section:

  
    <style type="text/css">
      .hidden { display: none; }
    </style>
    <!-- ... -->
  
  
    <!-- Body Content -->
  

In the JavaScript code, the addClass() method is used to hide the HTML element before the document is ready:

$('html').addClass('hidden');

Once the page is loaded (or the document is ready), the HTML element is made visible:

$(document).ready(function() {
  $('html').removeClass('hidden');
});

By hiding the HTML element, all its child elements are hidden as well, preventing any FOUC. Note that the addClass() method should be called outside of the .ready() function for this approach to work effectively.

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