jquery, hide content until loaded

Question

I am currently using this script to fade page transitions:

$(document).ready(function() {

    $(window).bind("unload", function() {});
    $("body").css("display", "none");

    $("body").hide();

    $("body").fadeIn(2000);

    $('a.fade1, a.fade2, a.fade3, a.fade4').click(function(event) {
        event.preventDefault();
        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

Answer 1

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

CSS

body {
  display: none;
}

jQuery

$(window).load(function() {
  // When the page has loaded
  $("body").fadeIn(2000);
});

The load event is sent to an element when it and all sub-elements have been completely loaded.

See the load event.

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