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.

È pubblicato 21/11/2015 alle 02:01
dall'utente
In altre lingue...                            


2 risposte

voti
2

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

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

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more