Geek asks and answers

How to prevent jQuery onload stealth?

I am using jQuery user interface tabs. How can I prevent the flickering of content loading and also make sure the content is displayed when javascript is disabled?

I tried to add the .js class to the body when the document is loaded, but since the tabs load at the same time as the added class, the content still flickers.

#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>
+5
source share
5 answers

that's what I'm doing. put the class no-jsin your html tag, and then put the following code right 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>

html, . no-js , js.

:

#container {
  display:none;
}
.no-js #container
{ 
  display: block;
}
+5
<html class="nojs">
  ...
  <head>
     <script>
       document.documentElement.className = "js";
     </script>
  </head>

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

, js . , H5BP + Modernizr, , , JS FOUC ( - js).

+5

:

<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>
+1

, . , () jquery-ui jquery-ui.

:

<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>
+1

:

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

, , , , .

0

More articles:


All Articles