Question

我需要网站在应用JavaScript之前显示空白，而不是单词＆＃34; Hello World！＆＃34;。是否有捷径可寻？谢谢。

<div id = "id">
Hello World!
</div>

<script type = "text/javascript">
document.getElementById("id").innerHTML = "Hello JavaScript!";
</script>

PS：上面当然只是一个例子，而且大部分时间它会显示＆＃34; Hello JavaScript！＆＃34;它会如此之快，以至于＃34; Hello World！＆＃34;除非你有一个非常非常慢的互联网连接，否则它甚至不存在。

Answer 1

将所有内容放在#container内，默认情况下会隐藏。然后，一旦你进入你的JavaScript显示它：

CSS

#container { display: none; }

HTML

<body>
    <div id="container">
        <div id = "id">
            Hello World!
        </div>
    </div>
</body>

JS

document.getElementById("id").innerHTML = "Hello JavaScript!";
document.getElementById("container").style.display = "block"; // show

Answer 2

你的意思是这样吗，

<script>
function myFunc() {
    document.getElementById("form").innerHTML = "<div class=\"g-recaptcha\" data-sitekey=\"myspecialcodewhichisasecret\"></div>";
}
</script>
<form action="/whatever" id="form" method="post">
</form>
<button onclick="myFunc()">CLICK ME AND GET FREE RECAPTCHA</button>

setTimeout(function(){
	document.getElementById("id").innerHTML = "Hello JavaScript!";
},2000)

或者

<div id = "id">
  (Pretending its blank)
</div>

document.getElementById("id").style.display = 'none'
setTimeout(function(){
    document.getElementById("id").style.display = 'block'
	document.getElementById("id").innerHTML = "Hello JavaScript!";
},2000)

Answer 3

当然，只需将您要隐藏的任何元素的默认样式设置为CSS中的display: none即可。然后将以下内容添加到您的JS或脚本标记中的文档......

    window.onload = function () { 
      // Do stuff what you need
      var elToShow = document.getElementById('id_of_element');

      // Then show the content that was not displayed
      elToShow.style.display = 'block'; 
    }

Answer 4

创建一个CSS类来隐藏内容：

<style>
.hidden { display: none; }
</style>

将类添加到div：

<div id = "id" class="hidden">
   Hello World!
</div>

更新JavaScript以分配文本内容，并在页面完成加载时删除类，取消隐藏 div 。

<script>
    var idDiv = document.getElementById("id");
    idDiv.textContent = "Hello JavaScript!";
    window.addEventListener("load",function(){
        idDiv.className = idDiv.className.replace(/hidden/,'');
    });
</script>

在应用JavaScript之前显示空白网站

4 个答案:

或者