Take the 2-minute tour ×

I am currently using this script to fade page transitions:

$(document).ready(function() {

    $(window).bind("unload", function() {});



    $('a.fade1, a.fade2, a.fade3, a.fade4').click(function(event) {
        linkLocation = this.href;
        $("body").fadeOut(700, redirectPage);

    function redirectPage() {
        window.location = linkLocation;


this works like a charm when the content is alredy in cache, but when an image needs to load it will momentarily appear then be hidden and faded in

so what i need is a way to hide the content until it is fully loaded and only after that let it be faded in

hope someone can help me, thanks in advance

share|improve this question
You could serve up page with display: none on the body? that way it's always hidden until the jquery kicks in. –  Dave Becker Mar 16 '12 at 8:34
add comment

3 Answers

up vote 9 down vote accepted

Use CSS to hide the element by default and then show it when you like to.


body {
  display: none;


$(window).load(function() {
  // When the page has loaded


See the load event.

You might also consider to replace your "fadeX" classes with a single class, something like "fade"

share|improve this answer
The problem with css is that it has to retrieve the styleshiit first. so you would have to use <style> or style="". Otherwise before the styleshiit is loaded, the page would be still display and might result in a buggery flicker. –  Anonymous Sep 4 '12 at 16:48
add comment

Why not put all the initial css using... CSS?

<!-- some stuff of yours -->

Then your js needs to only worry about calling fadeIn(). This way when browser renders <body> tag, it already knows to hide it, so it won't be shown at all until your fadeIn() gets called.

share|improve this answer
Sometimes jQuery makes people lose sight of basic common sense. +1 for bringing it back. –  Niet the Dark Absol Mar 16 '12 at 8:40
add comment

CSS for each image: visibility: hidden;

jQuery.ready: visibility: visible; (or use a fade or whatever you like). Why visibility instead of 'display'? display will make a lot of 'jumps' and 'glitches' on your page when items start loading.

Also, you can try using jQuery's load method instead of ready.

share|improve this answer
Just out of curiosity, is there any reason why I'd favor visibility:hidden over display:none in this particular use case? –  Richard Neil Ilagan Mar 16 '12 at 8:37
Yeah, I just edited my answer... visibility saves the blank space where the element should appear, while display simply removes it. Though I guess it's the same if you're working with the body elements... But still, it's a good thing to know. –  Shomz Mar 16 '12 at 8:38
Just using the load() method will do it. –  Shomz Mar 16 '12 at 8:41
add comment

Your Answer


