隐藏正文直到它完成加载

Question

我创建了这段代码，因此我的页面将被隐藏，直到它完成加载。但是我的代码没有像我预期的那样工作。我希望这会隐藏 BODY 直到 OnLoad 事件被触发。然而，相反，它只是保持隐藏状态。

任何帮助将不胜感激，如果有另一种更好的方法隐藏 BODY 直到它完成加载，或者这个有什么问题。

这是我目前尝试过的方法：

function unveil() {
  var thebod = document.getElementById("testbody");
  thebod.STYLE = "display: block;"
}

<HTML>

<HEAD>
  <TITLE>HELLO</TITLE>
</HEAD>

<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
  <div align="CENTER">
    HELLO WORLD!
  </div>
</BODY>

</HTML>

Answer 1

windowobject的DOMContentLoaded事件可以做到这一点。但是，不要隐藏 body，而是隐藏包装器。并且，当您设置样式时，请确保设置 CSS 属性的样式，而不是 object 本身的样式。

window.addEventListener("DOMContentLoaded", function(){
  document.getElementById("wrapper").style.display = "block";
});

#wrapper { text-align:center; background:#e0e0e0; display:none;}

<HTML>

<HEAD>
  <TITLE>HELLO</TITLE>
</HEAD>

<BODY>
  <div id="wrapper">
    HELLO WORLD!
    
    <!-- The following is only added to create a delay in the 
         parsing of the document -->
    <script>
      for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; }
    </script>  
  </div>
</BODY>

</HTML>

Answer 2

您没有正确设置元素 'style'：

您可以：

element.style.display = "block";

或

element.setAttribute('style', "display: block");

这是一个工作示例：

function unveil() {
  var thebod = document.getElementById("testbody");
  thebod.style.display = "block";
}

<HTML>

<HEAD>
  <TITLE>HELLO</TITLE>
</HEAD>

<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
  <div align="CENTER">
    HELLO WORLD!
  </div>
</BODY>

</HTML>

Answer 3

<HTML>

<HEAD>
  <TITLE>HELLO</TITLE>
</HEAD>

<BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;">
  <div align="CENTER">
    HELLO WORLD!
  </div>
</BODY>

</HTML>

Answer 4

您的问题在这里：

thebod.STYLE = "display: block;"

应该读作：

thebod.style.display = 'block';

这是完整的方法（使用不显眼的 javascript）：

var body = document.getElementsByTagName('body')[0];

function unveil() {
    body.style.display = 'block';
}

window.addEventListener('load', unveil, false);

body {
display: none;
}

div {
text-align: center;
}

<div>HELLO WORLD!</div>

隐藏正文直到它完成加载

Hide body until it finishes loading

html

javascript

css

onload