第一次加载页面时运行功能

Question

我试图在用户第一次在网站上查看主页时运行微调器。我使用localStorage查看用户之前是否访问了该网站，但我认为它无法正常运行。

function load() {
    var isFired = localStorage.getItem('checkFired');
    if (isFired != '1'){
    } else {
        $(".se-pre-con").fadeOut("fast");
        localStorage.setItem('checkFired', '1');
    }
}

$(window).load(function() {
  load();
});

这只需要在第一次查看主页时运行。如果他们离开并回来，我不希望显示微调器。目前，它每次查看主页时都会运行。如果我将以下代码放在if语句的if部分中，则微调器继续旋转，页面永远不会加载。

$(".se-pre-con").fadeOut("fast");
localStorage.setItem('checkFired', '1');

我有什么想法可以让它发挥作用吗？

编辑：微调器的Css

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../img/ring.gif) center no-repeat #fff;
    overflow-y: hidden;
}

Answer 1

你有两个选择（都有小问题）

1. 默认情况下使微调器 可见 （并使用JS处理隐藏）（就像您已经这样）
2. 默认情况下使微调器 隐藏 （并使用JS处理 show ）

你将使用哪一个取决于DOM中元素的数量（DOM将为JS触发的速度有多快（读取LStorage，构建DOM节点等等））

Spinner最初display:block;

var firstVisit = localStorage.firstVisit != "1"; // Get & store current state (null/"1")
localStorage.firstVisit = "1";  // Page is now visited so set to "1" regardless

jQuery(function($) {

  var $spinner = $("#spinner"); // Use rather an ID. It's faster!
  $spinner.css({display: firstVisit ? "block" : "none"}); // Hide spin. if not first visit

  if( firstVisit ) {            // First time on page
    $(window).load(function() { // P.S: does not applies to unloaded images and media
      $spinner.fadeOut();       // fade out and display none
    });
  }

});

Spinner最初display:none;

var firstVisit = localStorage.firstVisit != "1"; // Get & store current state (null/"1")
localStorage.firstVisit = "1";        // Page is now visited so set to "1" regardless

jQuery(function($) {

  if( firstVisit ) {                  // First time on page
    var $spinner = $("#spinner");     // Use rather an ID. It's faster!
    $spinner.css({display: "block"}); // Show spinner

    $(window).load(function() { // P.S: does not applies to unloaded images and media
      $spinner.fadeOut();       // fade out and display none
    });
  }
  // else: spinner will be hidden by default (CSS) so all fine

});

Answer 2

您的代码看起来正确但不符合您的逻辑：您检查isFired是否为not equal to 1，但您应该检查isFired是否等于1因为设置本地存储时isFired的值是什么

尝试：

if (isFired == '1')

而不是

if (isFired != '1')

所以你的代码应该不需要别的：

function load() {
    var isFired = localStorage.getItem('checkFired');
    if (isFired != '1'){
        localStorage.setItem('checkFired', '1');
        $(".se-pre-con").fadeOut("fast");
    } 
}

$(window).load(function() {
  load();
});

编辑正如@RococBuljan所说..你的css也有问题所以试试吧。

将dispaly:block添加到您的微调器css并执行：

function load() {
    var isFired = localStorage.getItem('checkFired');console.log(isFired,'aaa')
    if (isFired != '1'){
        localStorage.setItem('checkFired', '1');
        $(".se-pre-con").fadeOut("fast");
    }
    else{
        $(".se-pre-con").css("display","none");
    }
}

$(document).ready(function() {
  load();
});

Answer 3

在分配任何值之前，您似乎试图检查var isFired 或 localStorage.getItem（'checkFired'）; ，这将始终输出< em> null ，因此无限期地运行代码。
确保在if语句的末尾添加SecurityConfiguration，并在用户进入localStorage.setItem('checkFired', '1');的页面时尝试打印 isFired >为了调试并查看一切是否正常。