Nascondere la pagina finché non è stato caricato tutto Avanzato

Question

Ho una pagina Web che utilizza pesantemente jQuery.

Il mio obiettivo è mostrare la pagina solo quando tutto è pronto.

Con ciò voglio evitare di mostrare all'utente il fastidioso rendering delle pagine.

Ho provato questo finora (#body_holder è un avvolgimento interno corpo):

$(function(){ 
    $('#body_holder').hide(); 
}); 
$(window).load(function() { 
    $("#body_holder").show(); 
}); 

Questo funziona completamente soddisfacente, ma scombina il layout.

Il problema è che nascondere il wrapper interferisce con le altre funzioni jQuery e plug-in utilizzati (es. Layout-plugin).

Quindi immagino ci sia un altro trucco per farlo. Forse posare una foto o div sul corpo fino a quando window.load si è verificato?

Quali approcci usi?

EDIT:

La soluzione più probabile deve essere un altro modo di display:none o hide();

Answer 1

Qualsiasi cosa fatta con jQuery normalmente dovrà attendere per document.ready, che è troppo tardi IMHO.

Mettere un div in alto, in questo modo:

<div id="cover"></div> 

impostare alcuni stili:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;} 

e nasconderlo con JS quando tutti gli elementi sono caricati:

$(window).on('load', function() { 
    $("#cover").hide(); 
}); 

Or se per qualche ragione il tuo script impiega ancora più tempo allora gli elementi DOM da caricare, imposta un intervallo per verificare il tipo di qualche funzione tha t carica il più lento e rimuove il coperchio quando tutte le funzioni sono definite!

$(window).on('load', function() { 
 
    $("#cover").fadeOut(200); 
 
}); 
 

 
//stackoverflow does not fire the window onload properly, substituted with fake load 
 

 
function newW() 
 
{ 
 
    $(window).load(); 
 
} 
 
setTimeout(newW, 1000);

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>This</li> 
 
    <li>is</li> 
 
    <li>a</li> 
 
    <li>simple</li> 
 
    <li>test</li> 
 
    <li>of</li> 
 
    <li>a</li> 
 
    <li>cover</li> 
 
</ul> 
 

 
<div id="cover">LOADING</div>

Answer 2

Se si dispone di un #bodyholder div allora si può mettere display: none nel CSS per esso e poi con jQuery fare:

$(document).ready(function() { 
    $('#body_holder').show(); 
}); 

non vedo il motivo per nascondere un div dovrebbe interferire con il carico di tutto, perché tutto ciò significa che è nascosto. Tuttavia, se si utilizza un sacco di jQuery, assicurarsi di avvolgerlo in $ (document) .ready che si assicurerà che il DOM sia completamente caricato prima dell'esecuzione di Javascript

Un altro punto è che HTML/CSS è progettato per il caricamento progressivo e, se lo fai correttamente, puoi ottenere un buon caricamento progressivo dei contenuti per i tuoi utenti. Personalmente non vorrei che i miei utenti ottenessero uno schermo bianco per alcuni secondi fino a quando non è stato caricato tutto. Sposta il tuo javascript alla fine della pagina in modo che non blocchi il caricamento e il contenuto sullo schermo il più rapidamente possibile.

Answer 3

Si dovrebbe provare a impostare la visibilità di nascosto invece di display: none. L'impostazione della visibilità su nascosta manterrà tutte le posizioni e le dimensioni degli elementi, pertanto non dovrebbe creare problemi di layout.

Answer 4

ecco una soluzione jQuery per chi cerca:

nascondere il corpo con i CSS poi mostrarlo dopo che la pagina viene caricata:

CSS:

html { visibility:hidden; } 

JavaScript

$(document).ready(function() { 
    document.getElementsByTagName("html")[0].style.visibility = "visible"; 
}); 

La pagina passerà da vuota a mostrare tutto il contenuto quando la pagina viene caricata, no sh dei contenuti, non ci sono immagini che guardano caricare ecc