2012-03-16 13 views
10

Attualmente sto usando questo script a svanire transizioni di pagina:jquery, nascondere il contenuto fino a quando caricato

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

});​ 

questo funziona come un fascino quando il contenuto è alredy nella cache, ma quando l'immagine ha bisogno di caricarlo momentaneamente appare quindi essere nascosto e sbiadito in

così che cosa ho bisogno è un modo per nascondere il contenuto fino a quando è a pieno carico e solo dopo che lascia che sia sbiadito in

speranza che qualcuno mi può aiutare, grazie in anticipo

+0

Si può visualizzare la pagina con 'display: none' sul corpo? in questo modo è sempre nascosto fino a quando non inizia il jquery. –

risposta

37

Utilizzare i CSS per nascondere l'elemento per impostazione predefinita e quindi mostrarlo quando lo si desidera.

CSS

body { 
    display: none; 
} 

jQuery

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

L'evento carico viene inviato a un elemento quando e tutti sottoelementi ha stato completamente caricato.

Vedere load event.

Si potrebbe anche prendere in considerazione di sostituire le classi "FADEX" con una sola classe, qualcosa come "fade"

+3

Il problema con css è che deve prima recuperare lo styleshiit. quindi dovresti usare