search

Home >Web Front-end >CSS Tutorial >How to Eliminate the Flash of Unstyled Content (FOUC)?

How to Eliminate the Flash of Unstyled Content (FOUC)?

Original
2024-11-22 17:29:14893browse

How to Eliminate the Flash of Unstyled Content (FOUC)?

Tackling the Flash of Unstyled Content

The unwanted appearance of unstyled content while a webpage loads is a common issue known as the Flash of Unstyled Content (FOUC). This brief article addresses this problem and its solution.

The traditional approach of concealing page elements with CSS and subsequently revealing them with JavaScript is problematic. It compromises website usability for users with JavaScript disabled.

To overcome this, it's recommended to use JavaScript to both hide and display elements after page loading. While jQuery offers an initial solution, it may not be prompt enough to avoid FOUC for larger pages.

A more effective technique is to hide the HTML tag with JavaScript before the page renders, allowing for swift concealment upon script execution:

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

In this approach, jQuery's addClass() function is invoked outside the .on('load') method, ensuring that the HTML tag is concealed immediately.

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

JavaScript swift jquery css html for while function this display issue prompt
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How Can I Achieve Equal Spacing Between Flexbox Items, Including the First and Last?Next article：How Can I Achieve Equal Spacing Between Flexbox Items, Including the First and Last?

Related articles

See more