jquery - 如何限制每个 session 显示一次预加载器？

Question

在我的网站上，我在每个页面上都有一个预加载器。

<div id="preloader" >
<div id="status"></div>
<div id="statustext">some text</div>
</div>

它是由这个 jquery 触发的:

//<![CDATA[
var sCookie = Cookies.get('cargado');

if (sCookie != null) 
{

    $('#preloader').hide();
}
else 
{
    $(window).on('load', function () 
    { // makes sure the whole site is loaded 
        $('#status').fadeOut(); // will first fade out the loading animation 
        $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. 
        $('body').delay(350).css({ 'overflow': 'visible' });
        Cookies.set('cargado', 'si');

    })
}
    //]]>

我的需要是预加载器应该只在 session 中显示一次。换句话说，如果用户访问我网站上的 10 个页面，他应该只看到一次，即第一页，无论他是从主页还是内部页面进入网站。我想出了上面显示的解决方案，但尽管设置正确设置 cookie 它不会隐藏预加载器 div。

我在这里创建了一个测试页面:http://www.mejoresdatos.cl/testpage.html

Answer 1

使用 localStorage/sessionStorage 代替 cookie

 <style>
#preloader 
  {
    display:none;
  }
</style>

$(window).on('load', function () 
        { // makes sure the whole site is loaded 
            if (typeof(Storage) !== "undefined") {
                // Code for localStorage/sessionStorage.                
                if(localStorage.isFirstLoadComplete==="false"){
                    $('#preloader').show(0);
                    $('#status').fadeOut(); // will first fade out the loading animation 
                    $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. 
                    $('body').delay(350).css({ 'overflow': 'visible' });
                    localStorage.setItem("isFirstLoadComplete", "true");
                }
            } else {
                // Sorry! No Web Storage support..
            }
        });