JAVASCRIPT

Question

我的页面中有这个活动

window.addEventListener("load", function(){
            var load_screen = document.getElementById("load_screen");
            document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded");
            })

wich 在加载页面时为正文 class="loaded" 添加了一个属性，但由于我添加了一个很酷的预加载器效果，我想让事件在显示真实页面之前等待 3-5 秒，即使它已经满载（当然，如果没有满载，还要等更多）。这在某种程度上可能吗？

Answer 1

将 set 属性包装在 setTimeout 函数中，以便在设定的时间后执行。

window.addEventListener("load", function(){
                   var load_screen = document.getElementById("load_screen");
                   setTimeout(function(){document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded");}, 3000);
                })

Answer 2

使用window.setTimeout

window.addEventListener("load", function(){
           window.setTimeout(
              function() {
                 var load_screen = document.getElementById("load_screen");
                 document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded"); 
               },
               3000);
        })

Answer 3

如果您想要延迟 最小值 5 秒，您可以在建立事件处理程序时捕获时间（即，在"load" 事件已触发），然后在处理程序中再次检查时间。

var startTime = Date.now();
window.addEventListener("load", function(){
  var load_screen = document.getElementById("load_screen");
  setTimeout(function() {
    document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded");
  }, Math.max(0, 5000 - (Date.now() - startTime)));
});

也没有理由使用 .setAttribute() 来设置 class:

    document.getElementsByTagName("BODY")[0].className = "loaded";

就我个人而言，我要么使用 .classList 设施，要么走老路并添加新的 class:

    document.getElementsByTagName("BODY")[0].className += " loaded";

这样你就不会踩到 <body>.

上可能（可能在将来）的任何其他 classes

JAVASCRIPT - "Code inside event" 超时？ o.O

JAVASCRIPT - "Code inside event" timeout? o.O

events

timeout