Preventing FOUC using $(document).ready() event

Question

Preventing FOUC using $(document).ready() event

404 Views Asked by Jason Rogers At 19 April 2025 at 09:36

I am trying to prevent FOUC on my site. This is my code so far:

<head>

    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>

    <noscript>
        <link rel="stylesheet" href="css/skel.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-xlarge.css" />
    </noscript>

    <style type="text/css">
      .no-fouc {display: none;}
    </style>

    <script type="text/javascript">
      document.documentElement.className = 'no-fouc';
     $(document).ready(function() {
        $('.no-fouc').removeClass('no-fouc');
     });    
    </script>


</head>

Where am I going wrong here? I am still getting about 1-2 seconds of FOUC.

Thanks

Jason

Original Q&A

There are 1 best solutions below

**Jason Rogers** · Answer 1

This was my solution:

<head>

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>

<noscript>
    <link rel="stylesheet" href="css/skel.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>

    <style type="text/css">
       .no-fouc {display: none;}
     </style>

    <script type="text/javascript">
      document.documentElement.className = 'no-fouc';
     $(window).on("load", function() {
        $('.no-fouc').removeClass('no-fouc');
     });    
    </script>

</head>

Rather than using:

     $(document).ready(function() {

I used:

    $(window).on("load", function() {

Which executes:

    $('.no-fouc').removeClass('no-fouc');

when complete page is fully loaded, including all frames, objects and images.

Preventing FOUC using $(document).ready() event

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in HTML

Related Questions in FOUC

Trending Questions

Popular # Hahtags

Popular Questions