Show Splash-Screen einmal pro Sitzung mit jQuery ... Homepage „Flashen“ bei Last

Question

Show Splash-Screen einmal pro Sitzung mit jQuery ... Homepage „Flashen“ bei Last

stimmen

42

Ich versuche, ein Intro / Splash-Screen nur einmal pro Sitzung auf meiner Homepage erscheinen. Ich habe es mit dem Skript arbeitet unter, aber es „blinkt“ Die Homepage schnell vor dem Splash / Intro auf der ersten Standortlast läuft (nachfolgende Seite lädt zeigt nicht die div wie gewünscht / erforderlich)

Ich habe ein div mit einer Klasse von .splash_section zunächst versteckt und ich bin mit dem Skript unten enthalten.

Frage: Gibt es einen besseren Weg, um das Skript, oder einfach nur eine Art und Weise zu verhindern, dass die Homepage oder Körper aus schnell „Flashen“ vor den Intro-Shows zu schreiben?

$(document).ready(function(){

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

});

Vielen Dank für jede Hilfe im Voraus.

jquery html

Veröffentlicht am 21/11/2015 um 02:01
vom benutzer Brandon Vaughn

In anderen Sprachen...

2 antworten

stimmen

0

Da $(document).readyRückruf wird ausgelöst , wenn alle Seitenelemente analysiert werden, die beste Wahl ist das Splash - Element an der Spitze des Körpers zu setzen und das Skript mit dieser Funktion direkt nach dem es läuft. Auf diese Weise wird es die Meta - Daten aus dem Kopf laden, den Splash - Inhalt laden und sofort angezeigt werden, bevor andere DOM - Elemente geladen werden.

Etwas wie das:

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

Beantwortet am 21/11/2015 um 02:13
quelle vom benutzer Shomz

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

stimmen

2

Der Autor der Frage hat diese Antwort als die beste genommen.

Ich würde auch den Inhalt der Homepage verstecken zunächst mit CSS:

.home-page {
    display: none;
}

Ändern Sie dann Ihr Skript:

$(document).ready(function(){

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

Beantwortet am 21/11/2015 um 02:11
quelle vom benutzer Vince