如何解决 jQuery 中的预加载器和会话存储问题？答案

【问题标题】：How to solve the issue with preloader and session storage in jQuery?如何解决 jQuery 中的预加载器和会话存储问题？
【发布时间】：2017-07-17 09:47:03
【问题描述】：

我的预加载器有问题。我试图将其设置为每个会话一次。它第一次工作，但是当您刷新网站时，预加载器根本不会停止，直到我从会话存储中删除数据的那一刻才能看到网站的内容。在样式表中添加visibility: invisible 根本不起作用。

canvas {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  z-index: 99;
}

<canvas id="c"><img id="logo" width="1280" height="1024"  alt="logo"></canvas> 
<div> 
  content
</div>

if (sessionStorage.getItem('dontLoad') == null){
  jQuery("#c").delay(1000).fadeOut('slow', function(){
    jQuery( "body" ).animate({
      visibility: visible
    }, 1000);
  });
  sessionStorage.setItem('dontLoad', 'true');
}

【问题讨论】：

第一次后它不起作用，因为您设置了 dontLoad 标志，它阻止了 fadeOut() 被调用。
我应该用什么来代替 dontLoad？
您需要重新构建 HTML 和 CSS。他们现在的设置方式是加载器将总是显示在 CSS 中，因此总是必须隐藏在 JS 中

标签： javascript jquery html css canvas

【解决方案1】：

问题是您需要更改 CSS。我会尽力解释。

在您的 CSS 中，您已将画布设置为 display: none。在您的 jQuery 中，您尝试使用 fadeOut 动画。这行不通，因为该元素没有显示出来，基本上是从文档中移除了，所以jQuery无法改变它。

您需要做的是将画布设置为display: block。这样当用户访问网站时“预加载器”是可见的。然后'preloader'会淡出。

这是更新后的 CSS。

canvas {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #000000;
    z-index: 99;
}

JavaScript

if (sessionStorage.getItem('dontLoad') == null)
{
    jQuery("#c").delay(1000).fadeOut('slow', function()
    {
        jQuery( "body" ).animate({
            visibility: visible
        })
    }, 1000);
}

if (sessionStorage.getItem('dontLoad') == true)
{
    $('#c').css('display', 'none');
}

【讨论】：