Vis velkomstbilde én gang per økt med jQuery ... hjemmeside "blinkende" under belastning

Question

Vis velkomstbilde én gang per økt med jQuery ... hjemmeside "blinkende" under belastning

stemmer

42

Jeg prøver å lage en intro / splash screen vises bare én gang per økt på min hjemmeside. Jeg har det å jobbe med manuset under, men det blinker på hjemmesiden raskt før du kjører splash / intro på den opprinnelige nettstedet belastning (påfølgende språk laster ikke vise div som ønsket / nødvendig)

Jeg har en div med en klasse med .splash_section skjult i utgangspunktet og jeg kjører skriptet inkludert nedenfor.

Spørsmål: Finnes det en bedre måte å skrive manuset, eller rett og slett en måte å hindre hjemmesiden eller kroppen fra raskt blinkende før intro viser?

$(document).ready(function(){

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

});

Takk for hjelp på forhånd.

jquery html

Publisert på 21/11/2015 klokken 02:01
bruker Brandon Vaughn

På andre språk...

2 svar

stemmer

0

Siden $(document).readytilbakeringing branner når alle sideelementer er analysert, er det beste alternativet for å sette splash element på toppen av kroppen og kjøre skriptet med denne funksjonen rett etter det. På den måten vil den laste metadataene fra hodet, legger sprut innhold og viser det med en gang før eventuelle andre DOM-elementer er lastet.

Noe sånt som dette:

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

Svarte 21/11/2015 kl. 02:13
kilden bruker Shomz

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

stemmer

2

Forfatteren merket dette svaret som det beste.

Jeg vil også skjule innholdet på hjemmesiden i utgangspunktet, ved hjelp av CSS:

.home-page {
    display: none;
}

Deretter endrer skriptet til:

$(document).ready(function(){

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

Svarte 21/11/2015 kl. 02:11
kilden bruker Vince