2012-12-18 2 views
6

Il mio sito carica le immagini molto lentamente. Appaiono alcuni testi, poi alcune tabelle, poi alcune immagini ... e poi - l'immagine di sfondo del corpo.
Come posso forzare che nulla debba essere visualizzato finché tutta la pagina non è pronta?Come evitare di visualizzare gradualmente una pagina?

+0

@nerdwaller, grazie mille. – Bonaca

+0

Speriamo che questo ti porti nella giusta direzione, sono d'accordo con la risposta più alta laggiù. Una sorta di elaborazione dovrebbe mostrare così le persone non pensano di avere un server scarso. – nerdwaller

+0

Sì, ho visto il tuo link e sembra che utilizzerò una piccola immagine gif (loader) e jQuery onload() per cambiare il css delle immagini. Forse dovresti progettare il tuo commento come risposta. Grazie ancora. – Bonaca

risposta

3

Probabilmente il modo più semplice/migliore sarebbe utilizzare Javascript per farlo. Il modo principale in cui ho visto questo implementato è il gestore di documenti pronti a rivelare tutte le cose nascoste.

$(document).ready(function() { $('*').show(); }); // Or something similar. 

Naturalmente, la gente piace vedere una sorta di valutazioni di "progresso" in modo che il sito non compare poco codificato o come se il server è spazzatura. Quindi una barra di caricamento o qualsiasi altra cosa.

Come ho già detto, il posto migliore per questo tipo di domande è Stack Overflow, e forse questo verrà spostato da un individuo di livello superiore. Nel frattempo, ecco un molto similar question su Stack Overflow.

+0

'.ready()' si attiva una volta che il DOM è completo, * prima * le immagini sono state caricate, quindi l'OP continuerà ad avere lo stesso problema (es. in attesa del caricamento delle immagini). Dai documenti jQuery su '.ready()': "* Nei casi in cui il codice si basa su risorse caricate ... il codice deve essere inserito in un gestore per l'evento' load'. * "L'OP deve attendere per' window .onload'. – apsillers

4

Si potrebbe aggiungere una classe al body che ha display:none e rimuoverlo una volta che la pagina viene caricata ..

<body class="loading"> 
... 
</body> 

e

<script> 
    window.onload = function(){document.body.className = '';}; 
</script>