Question

我试图在我的主页上每个会话只显示一次介绍/启动画面。我确实让它与下面的脚本一起工作，但它会闪现＆＃34;在初始站点加载上运行splash / intro之前快速主页（后续站点加载不显示想要/需要的div）

我有一个div，其中最初隐藏了一类.splash_section＆amp;我正在运行下面的脚本。

问题：是否有更好的方法来编写脚本，或者只是一种方法来防止主页或正文快速闪烁＆＃34;在介绍之前显示？

$(document).ready(function(){

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

});

感谢您提前提供任何帮助。

Answer 1

我最初还会使用css：

隐藏主页的内容

.home-page {
    display: none;
}

然后将脚本更改为：

$(document).ready(function(){

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

Answer 2

由于$(document).ready回调在解析所有页面元素时触发，最好的办法是将splash元素放在正文的顶部，并在其后面运行带有该函数的脚本。这样它将从头部加载元数据，加载启动内容并在加载任何其他DOM元素之前立即显示它。

这样的事情：

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

使用jQuery每次会话显示一次启动画面...主页＆＃34;闪烁＆＃34;在装载期间

2 个答案: