Question

我在页面中有这个事件

＆＃13;

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

＆＃13;

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

Answer 1

如果您希望延迟为最小 5秒，您可以在建立事件处理程序时捕获时间（即，在＆＃34;加载＆之前）＃34;事件已触发），然后在处理程序中再次检查时间。

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()设置课程：

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

就我个人而言，我要么使用.classList设施，要么去老派并添加新课程：

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

这样你就不会踩到<body>上可能（可能在将来）的任何其他类。

Answer 2

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

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

Answer 3

使用window.setTimeout

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

JAVASCRIPT - “内部事件代码”超时？ o.O

3 个答案: