每次访问显示一次加载 div，之后显示不同的加载 div

Question

对 Javascript 和一般的 Web 开发还很陌生，只是想寻求一些有关我在网站上的加载/转换 DIV 的帮助。

我使用下面的 jquery 在主页上显示介绍，在其他页面上使用相同的脚本（淡出较短且 div 不同）来模仿某种过渡。在主页上，我只想在每个会话或设定的时间段内显示一次介绍 div，但是我不想在两者之间不显示任何内容，而是想将其换成另一个 'transition' div 我在其他页面上使用。

我考虑过使用 cookie 和会话存储，但没有运气专门为此工作。任何帮助都会很棒，谢谢！

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

更新

在使用@brad 的建议后，这就是我最终使用的，并且完美地实现了我想要实现的目标。

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 是您需要使用的仅客户端变量的合适位置。也是very well supported.

要在本地存储中设置变量，只需这样设置：

localStorage.yourVariable = "some value";

请注意，所有本地存储变量都是字符串。如果您放入一些非字符串值，它将被转换为字符串。因此，read/write JSON 使用本地存储非常常见。

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

然后当你想取回数据时...

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

幸运的是，在您的情况下，类型或任何内容都无关紧要。您只需要将变量设置为某些内容即可。

localStorage.shownSplashScreen = true;

然后，测试您是否显示了启动画面：

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

同样，localStorage.shownSplashScreen 中的值是一个字符串，其值为 true，而不是布尔值。通过使用 !!，我们有效地转换为布尔值，并检测该变量是否具有真值（字符串 "true" 是）。

我提到所有这些是为了让您可以查看其中的一些内容（如果您不熟悉的话）。最终解决方案非常简单。未经测试但试试这个：

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

我们在这里所做的就是将启动画面时间设置为 1200 毫秒，如果我们没有显示它，如果我们有 0 毫秒（这将执行隐藏它的功能一次此调用堆栈已完成。

每次访问显示一次加载 div，之后显示不同的加载 div

Show a loading div once per visit, thereafter, a different loading div

session

jquery

splash-screen

session-cookies