jQuery, ocultar el contenido hasta que esté cargada

Question

actualmente estoy usando este script a desvanecerse transiciones de página:

$(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; 
    } 

});​ 

esto funciona como un encanto cuando el contenido es todavia en la memoria caché, pero cuando una imagen tiene que cargarlo momentáneamente aparecerá a continuación, se oculta y se desvaneció en

así que lo que necesito es una manera de ocultar el contenido hasta que esté completamente cargado y sólo después de que dejar que se desvaneció en

esperanza alguien me puede ayudar, gracias de antemano

Answer 1

Utilice CSS para ocultar el elemento de forma predeterminada y, a continuación, muéstrelo cuando lo desee.

CSS

body { 
    display: none; 
} 

jQuery

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

el evento de carga se envía a un elemento cuando y todos los sub-elementos tienen sido completamente cargado.

Ver el load event.

También puede considerar reemplazar sus clases "Fadex" con una sola clase, algo así como "fade"