Mostra schermata di avvio una volta per sessione con jQuery ... homepage "lampeggiante" durante il caricamento

Question

Mostra schermata di avvio una volta per sessione con jQuery ... homepage "lampeggiante" durante il caricamento

voti

42

Sto cercando di fare una schermata di intro / splash compaiono solo una volta per sessione sulla mia homepage. Io ce l'ho a lavorare con lo script di seguito, ma si lampeggia la home page in fretta prima di eseguire il tonfo / intro sul carico iniziale sito (successivi carichi del sito non mostrano il div come volevamo / necessario)

Ho un div con una classe di .splash_section nascosto inizialmente e sto facendo funzionare lo script riportato qui di seguito.

Domanda: C'è un modo migliore per scrivere la sceneggiatura, o semplicemente un modo per evitare che la home page o corpo da subito lampeggiante prima degli spettacoli intro?

$(document).ready(function(){

if (sessionStorage.getItem('splash') !== 'true') {
$('.splash_section').show()
sessionStorage.setItem('splash','true');
}

});

Grazie per qualsiasi aiuto in anticipo.

jquery html

È pubblicato 21/11/2015 alle 02:01
dall'utente Brandon Vaughn

In altre lingue...

2 risposte

voti

0

Dal momento che $(document).readygli incendi di callback quando tutti gli elementi della pagina vengono analizzati, la soluzione migliore è quella di mettere l'elemento schizzi in cima del corpo ed eseguire lo script con quella funzione subito dopo. In questo modo si caricherà i metadati dalla testa, caricare il contenuto schizzi e visualizzarlo subito prima di tutti gli altri elementi del DOM sono caricati.

Qualcosa come questo:

<body>
    <div class="splash_section"></div>
    <script>
    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show()
        sessionStorage.setItem('splash','true');
    }
    </script>
    ...

Risposto il 21/11/2015 a 02:13
fonte dall'utente Shomz

Vince · Accepted Answer · 2015-11-21 02:11

voti

2

L'autore ha accettato questa risposta come la migliore.

Vorrei anche nascondere il contenuto della home page inizialmente, usando i CSS:

.home-page {
    display: none;
}

Quindi modificare lo script per:

$(document).ready(function(){

    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show();
        sessionStorage.setItem('splash','true');
    }
    else {
        $('.home-page').fadeIn();
    }    
});

Risposto il 21/11/2015 a 02:11
fonte dall'utente Vince