Zeigen Sie ein Laden div einmal pro Besuch, danach ein anderes Laden div

Question

Ziemlich neu zu Javascript und Web-Entwicklung im Allgemeinen, nur auf der Suche nach etwas Hilfe mit dem Laden/Übergang DIVs ich auf einer Website haben.

Ich benutze die jquery unten, um ein Intro auf der Homepage und das gleiche Skript auf anderen Seiten (mit einer kürzeren Ausblendung und anderen div) anzuzeigen, um eine Art Übergang zu imitieren. Auf der Homepage möchte ich nur das Intro div einmal pro Session oder Set-Periode zeigen, aber anstatt dazwischen nichts anzuzeigen, möchte ich es für das andere 'transition' div tauschen, das ich auf anderen Seiten verwende.

Ich schaute auf die Verwendung von Cookies und Session-Speicher, hatte aber kein Glück, viel zu arbeiten, speziell dafür. Jede Hilfe wäre großartig, danke!

$(window).load(function() { 
    setTimeout(function(){ 
     $('#splash').fadeOut('slow', function() { 
     }); 
    },1200); 
}); 

UPDATE

Nach dem Vorschlag von @brad mit dem ist, was ich am Ende mit und funktioniert perfekt für das, was ich erreichen wollte.

HTML

<div id="preloader"> 

    <div id="splash1"> 
    </div> 

    <div id="splash2"> 
    </div> 

</div> 

CSS

#splashback { 
display: none; 
} 

#splashback2 { 
display: none; 
} 

JQUERY

$(document).ready(function(){ 

if (sessionStorage.getItem('splash') !== 'true') { 
     $("#splash1").show(); 
     setTimeout(function(){ 
     $('#preloader').fadeOut('slow', function() { 
     }); 
    },2500); 
    sessionStorage.setItem('splash','true'); 
} 
else { 
      setTimeout(function(){ 
       $("#splash2").show(); 
     $('#preloader').fadeOut('slow', function() { 
     }); 
    },500); 
}  

});

Answer 1

LocalStorage ist der geeignete Ort für clientseitige Variablen, die Sie verwenden müssen. Es ist auch very well supported.

Um eine Variable im lokalen Speicher gesetzt, es ist nur gesetzt, wie so:

localStorage.yourVariable = "some value"; 

Beachten Sie, dass alle lokalen Speichervariablen Strings sind. Wenn Sie einen Nicht-String-Wert eingeben, wird dieser in eine Zeichenfolge umgewandelt. Aus diesem Grund ist es sehr üblich JSON mit lokalem Speicher zu lesen/schreiben.

localStorage.config = JSON.serialize({ 
    exampleSetting1: true, 
    exampleSetting2: false 
}); 

Dann, wenn Sie wollen wieder die Daten bekommen ...

console.log(JSON.parse(localStorage.config)); 

Zum Glück in Ihrem Fall ein, oder alles keine Rolle spielt. Sie müssen nur die Variable auf etwas setzen.

localStorage.shownSplashScreen = true; 

Dann zu testen, ob Sie den Begrüßungsbildschirm gezeigt haben:

!!localStorage.shownSplashScreen; // true if shown, false if not 

Auch hier ist der Wert in localStorage.shownSplashScreen ein String mit dem Wert von true, kein boolean. Durch die Verwendung von !! werden wir effektiv in Boolean umgewandelt und erkennen, ob diese Variable einen truthigen Wert hat (was der String "true" ist).

Ich erwähne all dies, damit Sie einige dieser Dinge sehen können, wenn Sie nicht damit vertraut sind. Die Endlösung ist ziemlich einfach.aber ungetestet versuchen Sie dies:

$(window).load(function() { 
    setTimeout(function() { 
     $('#splash').fadeOut('slow');  
    }, (!!localStorage.shownSplashScreen) ? 0 : 1200); 
    localStorage.shownSplashScreen = true; 
}); 

Alles, was wir hier tun, ist das Splash-Screen Zeit von 1200 ms gesetzt, wenn wir es nicht gezeigt haben, und 0 ms, wenn wir (die die Funktion ausführen, wird es zu verstecken, sobald diese Call Stack ist abgeschlossen).