title: jQuery body fade-in
body: <p>I was wondering how to create body fade in when page is refreshing? You can see example at -  <a href="http://saporiexports.com" rel="nofollow">saporiexports.com</a> . And how much this kinda jQuery effect affects page performance?</p>
  
  <p>Only thing that I found on that page witch maybe would be related with that effect is </p>
  
  <pre><code>//PRELOAD SITE
  $(window).load(function(){ 
      $('#preloader').fadeOut('slow',function(){$(this).remove();});
  });
  </code></pre>
  
  <p>and than div in HTML <code>&lt;div id="preloader"&gt;&lt;/div&gt;</code>, but I think that is some kind a reloader. But there is no need for it in this page (maybe I am wrong). </p>
  
  <p>Of course you can do something like this -</p>
  
  <pre><code>$(function() {
  $('body').hide().fadeIn('slow');
  
  });
  </code></pre>
  
  <p>And it works, but I dont think that is the right way to do that.</p>
  
  <p><strong>EDIT</strong>
  Now I see that they use overlay div to manage that effect </p>
  
  <pre><code>div#preloader {
      background: url("../workimage/ajax-loader.gif") no-repeat scroll center center #000000;
      height: 100%;
      position: fixed;
      width: 100%;
      z-index: 999;
  }
  </code></pre>