Search code examples
jqueryfadein

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;
}
Solution

  • 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