How to prevent jQuery onload flicker unobtrusively?

Question

How to prevent jQuery onload flicker unobtrusively?

8.5k Views Asked by Asa Carter At 18 April 2025 at 15:56

I'm using jQuery UI Tabs. How should I prevent the flicker of loading content while also making sure that the content is visible when javascript is disabled?

I've tried adding a .js class to the body when the doc is loaded but as the tabs are loaded at the same time as the class being added there is still the flicker of content.

#container{display:none;}

<div id="container">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
    </ul>
    <div id="tabs-1">
       <p>Tab 1</p>
    </div>
    <div id="tabs-2">
      <p>Tab 2</p>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
  $('#tabs').tabs();
  $('#container').show();
});
</script>

Original Q&A

There are 5 best solutions below

Fabrizio Calderan On 01 June 2012 at 13:02

<html class="nojs">
  ...
  <head>
     <script>
       document.documentElement.className = "js";
     </script>
  </head>

  ...
  <style>
  #container {display:none;}
  .nojs #container { display: block;}
  </style>

this will make your content visible even when js is not available on your device. This approach is almost the same performed by H5BP + Modernizr and, as aside benefit, it will prevent the JS FOUC (flash of unstyled content due to js later execution).

ziad-saab On 01 June 2012 at 13:03

You can do it like this:

<div id="container">
  <div id="tabs">
  <script>$('#tabs').addClass('js');</script><!-- added this line -->
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
    </ul>
    <div id="tabs-1">
       <p>Tab 1</p>
    </div>
    <div id="tabs-2">
      <p>Tab 2</p>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
  $('#tabs').tabs().show(); // changed this line
  $('#container').show();
});
</script>

nebulousGirl On 01 June 2012 at 13:07

You could try it this way:

<script>
$("#container").hide();
$(document).ready(function(){
  $('#tabs').tabs();
  $('#container').show();
});
</script>

The container is hidden as it is loaded and when the document is ready and tabs are done, you can show the container.

rklehm On 23 September 2015 at 08:03

Thanks for above ideas to solve the on load flicker. As browsers try to render markup as soon as possible, this should be avoided for some (huge) jquery-ui content elements as jquery-ui Tabs.

This solution works for me:

<html>
...
  <head>
  ...
    <script>
      $(document).ready(function() {
        $("#tabs_container").tabs();

        // force *initialized* #tab_container to be displayed
        $("#tabs_container").show();
      });
    </script>
  </head>
  ...

  <body>
    ...
    <!-- avoid unstyled tabs to be displayed using "display: none" at markup -->
    <div id="tabs_container" style="display: none;">
      <!-- (huge) tabs content -->
    </div>
    ...
  </body>
</html>

**Dave Haigh** · Accepted Answer

this is what I do. put a class of no-js on your html tag and then put the following code just after the html tag:

<script>
    // Sets 'js' on html element and removes 'no-js' if present (here to prevent flashing)
    (function(){
        document.documentElement.className = document.documentElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + (' js '); 
    })();
</script>

This method allows you to have other classes on your html tag if required. Use the no-js class in your styles for pages that don't have js enabled.

styles example:

#container {
  display:none;
}
.no-js #container
{ 
  display: block;
}

How to prevent jQuery onload flicker unobtrusively?

There are 5 best solutions below

Related Questions in JQUERY

Related Questions in TABS

Related Questions in LOAD

Related Questions in FLICKER

Related Questions in UNOBTRUSIVE

Trending Questions

Popular # Hahtags

Popular Questions