Question

我正在创建一个带有闪屏的网站，我想让它在3秒后消失。当我包含jQuery时，我可以成功地执行此操作，但这需要时间来加载（特别是如果它没有被缓存），因此启动仍会显示一小段时间。

我也在使用cookies，因此它只会在页面的第一次加载时显示（所以它不会过于刺激）。

这是我的HTML：

<div class="splash">
    splash content
</div>

这是工作jQuery（我想避免）：

if(document.cookie.indexOf("visited=true") === -1) {
    $(".splash").delay(3000).queue(function(){
        $(this).addClass("hidden").dequeue();
    });
} else {
    $(".splash").addClass("hidden");
}

以下是我提出的关于javascript的内容，但它不起作用：

document.getElementsByClassName("splash").addEventListener("load",
function() {
    if(document.cookie.indexOf("visited=true") === -1) {
        setTimeout(function(){
            this.classList.add("hidden");
        }, 3000);
    } else {
        this.classList.add("hidden");
    }
});

Answer 1

我认为您不希望将该函数添加为启动的load事件侦听器。您应该将其添加到页面的load事件中。

有关重新组织代码的更多详细信息，请参阅内联注释。不幸的是，它不适用于Stack Overflow片段环境中的cookie。

请注意，默认情况下，会将splash设置为隐藏（通过CSS）。这是一种比默认显示它然后隐藏它更好的做法。如果在读取cookie后确定不应显示启动画面，则由于处理限制，某些用户可能会在屏幕上暂时看到启动，或者如果您的代码中出现任何类型的错误，可能会更糟糕由于JS在错误处停止执行，因此可能会显示并且永远不会被带走。

// Get a reference to the splash dialog
var splash = document.querySelector(".splash");

// When the window is loaded....
window.addEventListener("load", function() {
  
  // Check to see if the cookie indicates a first-time visit
  if(document.cookie.indexOf("visited=true") === -1) {

    // Reveal the splash (remember: splash is hidden by default by CSS)
    splash.classList.remove("hidden");
    
    // .5 seconds later, hide the splash
    setTimeout(function(){
      splash.classList.add("hidden");
      
      // >> Set cookie to visited here <<
    }, 500);
  } 
});

.splash {
  height:200px;
  width:200px;
  background:yellow;
}

.hidden {
  display:none;
}

<div class="splash hidden">S P L A S H !</div>

Answer 2

document.getElementsByClassName("splash").addEventListener("load", //not possible as ByClassName returns a collection not an element
function() {
if(document.cookie.indexOf("visited=true") === -1) {//why not simply !...
    setTimeout(function(){
        this.classList.add("hidden");//this is window as setTimeout is a window function...
    }, 3000);
} else {
    this.classList.add("hidden");//the only that work
}
});

正确的方式：

document.getElementsByClassName("splash").forEach(el=>{el.addEventListener("load",function() {
if(!document.cookie.indexOf("visited=true")) {
    setTimeout(function(){
        this.classList.add("hidden");
    }.bind(this), 3000);//fix of context
} else {
    this.classList.add("hidden");
}
})});

Answer 3

您可以在页面底部包含此IIFE，以便在初始DOM元素准备就绪时执行该https://www.digitalocean.com/community/tutorials/how-to-serve-django-applications-with-uwsgi-and-nginx-on-ubuntu-16-04。这样就可以避免事件监听器。

我还将你的启动转换为使用ID splash而不是类。如果您更喜欢该类，则在使用document.getElementsByClassName("splash")时，它会返回一个元素数组。在这种情况下，您必须指定要使用的返回数组的哪些元素（即document.getElementsByClassName("splash")[0]或迭代它们）。

＆＃13;

(function() {
  var splash = document.getElementById("splash");
  if (document.cookie.indexOf("visited=true") === -1) {
    splash.classList.remove("hidden"); // Display the splash
    setTimeout(function() {
      splash.classList.add("hidden"); // Hide it after the timeout
    }, 500);
  }
})();

＆＃13;

#splash { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ddd; }
.hidden { display: none; }

＆＃13;

Not splashed!
<div id="splash" class="hidden">Splashed!</div>

＆＃13;

延迟后使用vanilla javascript添加类

3 个答案: