Toon splash screen keer per sessie met jQuery ... homepage "knipperende" tijdens het laden

stemmen
42

Ik probeer te maken van een intro / splash scherm slechts één keer per sessie op mijn homepage. Ik heb wel dat het werken met de onderstaande script, maar het knippert de homepage snel voordat u de splash / intro op de initiële laden van de site (volgende site laadt niet de div te zien zijn als wilden / nodig)

Ik heb een div met een klasse van .splash_section aanvankelijk verborgen en ik ben het uitvoeren van het script hieronder opgenomen.

Vraag: Is er een betere manier om het script, of gewoon een manier om de homepage of het lichaam van snel knipperende te voorkomen voordat de intro shows te schrijven?

$(document).ready(function(){

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

});

Bedankt voor alle hulp op voorhand.

De vraag is gesteld op 21/11/2015 om 02:01
user
In andere talen...                            


2 antwoorden

stemmen
2

Ik zou ook de inhoud van de home pagina te verbergen in eerste instantie, met behulp van css:

.home-page {
    display: none;
}

Dan verander je script naar:

$(document).ready(function(){

    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show();
        sessionStorage.setItem('splash','true');
    }
    else {
        $('.home-page').fadeIn();
    }    
});
antwoordde op 21/11/2015 om 02:11
bron van user

stemmen
0

Sinds $(document).readycallback branden wanneer alle pagina-elementen worden ontleed, uw beste inzet is om de splash element aan de top van het lichaam het script met die functie direct na het te zetten en uit te voeren. Op die manier zal de metagegevens van het hoofd plaatst, zal de splash inhoud te laden en de weergave meteen voordat andere DOM-elementen worden geladen.

Iets zoals dit:

<body>
    <div class="splash_section"></div>
    <script>
    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show()
        sessionStorage.setItem('splash','true');
    }
    </script>
    ...
antwoordde op 21/11/2015 om 02:13
bron van user

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