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.

Veröffentlicht am 21/11/2015 um 02:01
vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
2

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

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

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