jQuery body fade-in

问题

I was wondering how to create body fade in when page is refreshing? You can see example at - saporiexports.com . And how much this kinda jQuery effect affects page performance?

Only thing that I found on that page witch maybe would be related with that effect is

//PRELOAD SITE
$(window).load(function(){ 
    $('#preloader').fadeOut('slow',function(){$(this).remove();});
});

and than div in HTML <div id="preloader"></div>, but I think that is some kind a reloader. But there is no need for it in this page (maybe I am wrong).

Of course you can do something like this -

$(function() {
$('body').hide().fadeIn('slow');

});

And it works, but I dont think that is the right way to do that.

EDIT Now I see that they use overlay div to manage that effect

div#preloader {
    background: url("../workimage/ajax-loader.gif") no-repeat scroll center center #000000;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 999;
}

回答1:

What that website did was to put an overlay over the whole page and fade it out. I don't think it matters much, you can test both approaches to see which is faster

回答2:

Seems like a good way to create that effect by me. The performance isn't really affected by this. It just hides the body, and then shows it again. Just a single light process.

Greetz,

XpertEase

来源：https://stackoverflow.com/questions/6262047/jquery-body-fade-in