Ciò accade perché l'evento DOMLoaded viene generato abbastanza millisecondi prima che la pagina venga effettivamente visualizzata.
In poche parole, questo significa che devi ottimizzare la velocità del tuo sito web. Questo non significa che è necessario scaricare più velocemente, ma significa scaricare nell'ordine corretto, in modo non bloccante.
Fase uno: Il tuo markup
1) Sembra che ci sia molto che potete fare per ottimizzare il vostro codice. Innanzitutto, è possibile ottimizzare l'ordine dei fogli di stile e dei JavaScript. Per garantire che i file CSS vengano scaricati in modo asincrono, devi sempre includere CSS esterno prima dei file JavaScript esterni. style.css viene scaricato dopo alcune/tutte le tue chiamate JavaScript.
C'è un blocco di script trovato nella testa tra un file CSS esterno e un'altra risorsa. Per consentire il download parallelo, sposta lo script inline prima del file CSS esterno o dopo la risorsa successiva.
2) Il file JavaScript principale è incorporato nel codice. Non solo blocca il download della pagina finché lo script non ha finito di scaricare, ma averlo prima del probabilmente il contenuto sta causando (o aggiungendo) il flash bianco.
Caricamento il tuo script in modo asincrono in testa è il mio metodo preferito. Dovrai quindi attivare lo script al termine del caricamento del DOM, oppure puoi ottenere lo stesso risultato posizionando lo script nella parte inferiore del tag body.
Fase due: Harness capacità del suo navigatore
1) guardando le intestazioni HTTP, ci sono 28 articoli che sono serviti come le chiamate HTTP separata, che non vengono memorizzati nella cache del browser (incluse le pagine html, immagini jpg , fogli di stile e file JavaScript).
Questi elementi sono esplicitamente non memorizzabili nella cache e possono essere facilmente modificati modificando la configurazione del server web.
2) Abilitare la compressione gzip. La maggior parte dei browser Web (sì, anche IE) supporta la decompressione gzip e la maggior parte (se non tutti) i server Web supportano la compressione mediante gzip. Potresti anche andare in overhead e guardare in SPDY, che è un protocollo HTTP alternativo leggero (supportato in Chrome e Firefox).
Fase tre: Contenuto servire
Ci sono circa 30 singoli elementi che sono serviti dal tuo dominio. Innanzitutto, considera come potresti ridurre questo numero di richieste. 30 richieste HTTP per visualizzazione di pagina sono molte. Puoi combatterlo usando i seguenti metodi:
1) Download in parallelo su più nomi host. I browser attualmente limitano il numero di connessioni simultanee a un singolo dominio. La pubblicazione delle immagini da un dominio separato (ad esempio, img.bigtim.ca) può consentire loro di essere pubblicate in parallelo ad altri contenuti.
2) Combina più elementi in uno. Molti elementi che vengono scaricati sono puramente contenuti di stile, come il logo, elementi di menu, ecc. Questi possono essere combinati in una singola immagine (scaricati solo una volta) e divisi usando CSS. Questo si chiama CSS sprite. Stack Overflow: look here.
3) Se non è possibile ridurre la quantità di elementi da scaricare, è possibile ridurre il carico sul server (e, a sua volta, il browser del client) servendo il contenuto statico da un dominio senza cookie. Stack Overflow fa questo con tutti i loro contenuti statici come immagini, fogli di stile e script.
Fase quattro: Ottimizzare il proprio codice
C'è solo tanto che HTTP e la tecnologia del browser possono fare per aiutare la velocità del tuo sito web. Questo ultimo passo spetta a te.
1) C'è qualche ragione per cui tu scelga di ospitare jquery da solo? La pagina di download di Jquery mostra più CDN in cui è possibile puntare a uno scaricamento rapido di script nella cache.
2) Ci sono attualmente oltre 20 regole CSS non utilizzate all'interno dei fogli di stile (vale a dire il 36% dell'intero file CSS). Rifletti su ciò che è veramente necessario.
3) La parte principale di JavaScript (nella parte superiore del tag del tuo corpo) sembra essere un trucco per tentare di accelerare le cose, ma probabilmente non aiuta nulla.
Un cookie viene impostato per specificare se la pagina è già sbiadita o meno. Non solo stai usando JavaScript per eseguire una transizione che può essere felicemente eseguita dai CSS, ma più della metà dello script è usato per definire la funzionalità per leggere e scrivere il cookie.
vedere le cose come queste: $("body").css ("background-image", "url('images/background.png')"); e $("#website").show(); di solito mi fa farneticare di "separazione degli interessi", ma questa risposta è abbastanza a lungo ora quindi speriamo si può vedere che si tratta di cattiva pratica di mescolare lo stile e la funzionalità nello stesso codice.
Addendum: Guardando il codice, non v'è alcuna necessità di jQuery a tutti di perform quello che state facendo. Ma poi di nuovo, non è necessario che esegua ciò che stai facendo, quindi potresti probabilmente fare meglio senza alcun JavaScript .
Wow, grazie, è fantastico! –