javascript - 如何在第一次加载时隐藏内容，但在 ajax 运行后保持显示？

Question

现在，我的内容会在 .js 库 (typed.js) 传递回调函数后显示。这是我的脚本:

JS

$(function(){
    $("#logo-black").typed({
        strings: ["Nothing^450&Co^250.^500", "^800__^400&Co^600."],
        typeSpeed: 70,
  backSpeed: 100,
  callback: function() {
    $(".typed-cursor").css("display", "none"),
    setTimeout(function(){
      $('.main-load').toggleClass('main-load-active'),
      $('.nav-text').toggleClass('nav-text-active');
    },400),
    $('.nav-reveal').toggleClass('nav-reveal-active');
  }
    });
});

CSS

.main-load{
opacity: 0;
}
.main-load-active{
opacity: 1;
}
.main-load-transition{
-webkit-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-moz-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-o-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-ms-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

在 setTimeout 之后，我切换类“.main-load-active”，这将“.main-load”的不透明度从 0 更改为 1。

我的问题:如果用户导航到另一个页面，“.main-load”将通过 ajax 被新内容替换。一旦用户返回到站点的索引，“.main-load”将不可见，因为它在 CSS 中默认设置为 0 不透明度。

如何在网站加载/刷新时将“.main-load”保持为不透明度:0，但在用户导航到另一个页面并返回后可见？

Answer 1

您可以尝试使用document.referrer，这样您可以检查用户是否来自其他页面并将不透明度更改为1

$(document).ready(function() {
   var referrer =  document.referrer;
});