jQuery loader for the intro
<p>My Site have a small introduction with heavy images, here is the little animation on it:</p>

<p>Jquery</p>

<pre><code>$(function(){
    $('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
    $('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
    $('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
    $('#intro-logo').stop().delay(10000).fadeOut(1500);
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="intro-left"&gt;&lt;/div&gt;
&lt;div id="intro-right"&gt;&lt;/div&gt;
&lt;div id="intro-rights"&gt;&lt;/div&gt;
&lt;div id="intro-logo"&gt;&lt;img class="top" src="images/intro_top.jpg"&gt;&lt;img class="logo" src="images/intro-logo.jpg"&gt;&lt;img class="bot" src="images/intro-bot.jpg"&gt;&lt;/div&gt;
&lt;div id="header"&gt;
    Rest of the Site...
</code></pre>

<p>CSS</p>

<pre><code>#intro-left {
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    background: url(images/intro-left.png) right no-repeat;
    width: 58%;
    height: 100%;
}  

#intro-right {
    position: absolute;
    z-index: 9000;
    top: 0;
    left: 32%;
    background: url(images/intro-right.png) left no-repeat;
    width: 68%;
    height: 100%;
}
</code></pre>

<p>and as you can see, it is just full screen images and colors,  the problem is that the Web surfer may miss that intro, or, have it introduced in a bad way, with images loading... 
It make the intro ugly, then,
i want to know if there is a way to make all the content in the page invisible while it is loading, then, when all the content of that page is loaded, make it visible.
Maybe a display: none during the loading and then the page is loading make it block, something like that would work,</p>

<p>Is that posible? Or similar to it?</p>

<p>Thanks a lot in advance!</p>
