Question

I know there are tons of plugins/scripts that will pre-load the site while displaying a picture or a message but I am looking to extend the time x amount longer. In other words I want to display message, “This is the message” and while that is up I want the site to fully load and then wait x amount of seconds before fading that message out and fading in the rest of the site. Is this possible?

Answer 1

If you set the opacity of the page to 0 the browser will still render everything.
Then on .ready() fade it in.
Example:

HTML:

<div id="content">this is the site</div>
<div id="message">this is the message</div>

CSS:

#message{
    position:absolute;
    top:10px;  
}
#content{
    opacity:0;
    filter: alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

JS:

$(function(){
    $('#content').delay(1000).fadeTo(500, 1);
    $('#message').delay(1000).fadeOut(500, function() {
        $(this).remove();
    });
});

jsFiddle:
http://jsfiddle.net/9kM7p/