Seamless HTML page transition

With more and more complex HTML + CSS3 + jQuery page design these days, it is very easy to have clunky webpages which take a while to load, with components like jQuery tab controls display partially before they are formatted. A way to get around that is to display web pages after they are fully rendered.

 CSS:  
 <style>  
   html { visibility:hidden; } /*html is initially hidden*/  
   /*fade in effect*/  
   body {  
     opacity: 1;   
     transition: 1s opacity;  
   }  
   body.fade-out {  
     opacity: 0;  
     transition: none;  
   }  
 </style>  
 JavaScript  
 <script>  
 $(document).ready(function() {  
  /*show html after page load*/  
  document.getElementsByTagName("html")[0].style.visibility = "visible";  
 });  
 </script>