I have tried that one before, but it still seems to load the page first and for a split second I still see the whole page before it vanishes and comes back again.

I know this would look like a cleaner solution but in the end it’s the smoothness that counts… until I find better solutions (or new tech) I will use the previous method.

You could use
$(“body”).css(“display”, “none”);
$(document).ready(function() {
$(“body”).fadeIn(2000);
});

instead and you shouldn’t have the flickering.

To show an example of how one could also try and target “JS on” – users only:

$(document).ready(function() {
$(“body”).css(“display”, “none”);
$(“body”).fadeIn(2000);
});

Problem with this is that the “display:none” only comes up after the page was initially loaded (thus showing a flicker of the full page before going blank and fading in again).

So thanks alot for this solution
Will used it over here: http://www.belgianhiphop.be/ for some extra smooth browsing

Perhaps you are using absolute positioning? See earlier comment about that.

Thanks so much, I tried the above on my index page but unfortunately it still doesn’t seem to be working.

http://joeleih.com/test/indextest.html

Do you think the problem might be with the fact that my background images are in my CSS, homecontent and nav?

thanks,

Joe

[style removed]

Yeah, I would say the problem looks like what you have surmised. You’re preloading the images, but place that code before the jQuery code for fading in the page. So instead of having the preload code in the body onload event, place it like so:


$(document).ready(function()
{
// preload images
MM_preloadImages('images/nav-contact-up.gif','images/nav-links-up.gif','images/nav-hype-up.gif','images/nav-news-up.gif','images/nav-bio-up.gif','images/nav-films-up.gif','images/nav-comm-up.gif');

// fade in content.
$( '#content-wrapper' ).fadeIn("slow");
});