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

Question

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

Check your browser console (and next time do that before asking here, thank you). It should have told you that `$` does not exist at this point, because you are only embedding jQuery _after_ that script block. — CBroe, Sep 13 '17 at 12:59
It looks like there is something wrong with this question. You put your style at the bottom of your file (the reason would be to display text faster), then you try to hide your text until css is loaded... Just put your css at a normal position (on top) and everything will be fine — Deblaton Jean-Philippe, Sep 13 '17 at 13:02
I have re-ordered the code, the page now loads in the same way as when the style and final script were not there. — Jason Rogers, Sep 13 '17 at 13:24
ADreNaLiNe-DJ I don't understand what you mean by that? You want me to share the whole body section? At the moment to tag just reads — Jason Rogers, Sep 13 '17 at 13:40

score 1 · Answer 1 · answered Sep 14 '17 at 08:07

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

1 Answers1