Question

在加载并执行某些JavaScript（内置或单独的文件）之前，有可能不在用户浏览器中显示html页面（对于页面DOM操作）？

Answer 1

最简单的方法是设置css变量

display: none;

到整个页面。然后当加载所有内容时，您可以将显示设置为

display: block; // or something else that suits.

如果确保在文档的最开头加载了一块CSS，它将在显示任何html之前处于活动状态。

如果您使用像jQuery这样的javascript库，您将可以访问$（document）.ready（）函数，并且可以像这样实现切换：

<html>
    <head>
        <title>test</title>
        <style type="text/css">
            body > div {
                display: none;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $('body > div').css('display', 'block');
            });
    </head>
    <body>
        <div>
            This will initially be hidden.
        </div>
    </body>
</html>

Answer 2

不按照传统方式分发页面。浏览器（通常）会在到达时开始显示基本HTML文件的块。

当然，您可以通过从一些包含的Javascript文件动态生成所有HTML来模拟这一点。但这听起来不是一个好的计划，因为对于没有启用JS的人，或者如果你的脚本中有一个小错误，它会降低可怕的。一个更好的选择可能是将body标签设置为display: none并从脚本中重新设置它以使某些部分再次可见。

你实际上想要实现的目标是什么？听起来有可能有更好的方法来做到这一点......

Answer 3

将HTML页面的内容放在DIV中，使其显示无，并显示正文的载入。

<script type="text/javascript">

function showContent() { 
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
} 
</script> 
<body onload="showContent()"> 
<div id="divBody" style="display: none;">
 <--HTML of the page--> 
</div>  
</body>

Answer 4

您可能想要做的示例：

Facebook的“BigPipe”：http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919 此方法允许您首先加载JS，然后ASYNC +注入所有DOM内容。
GMail
Zimbra（类似于MS Outlook / Exchange的开源网络应用程序）

Answer 5

我的理解是你想在加载页面之前运行一些javascript代码。在js文件中，编写init函数并将eventlistener添加到“load”事件的窗口中。这将确保首先执行init代码，然后您可以开始显示HTML内容。

var Yourdomain = {};
YourDomain.initPage = function(){
 /* Your init code goes here*/
}

window.addEventListener("load", YourDomain.initPage, false);

Answer 6

所有你真正需要做的就是给你的元素一个ID或CLASS并使用dislay：none;属性。当您准备好显示它时，只需删除它。

CSS：

#div_1 {
            display: none;
        }

HTML：

<div id="div_1">
        <p>This will be the hidden DIV element until you choose to display it.</p>
        <p id="js_1"></p>
        <script>
            var x = "Some Test ";
            var y = "Javascript";
            document.getElementById("js_1").innerHTML = x + y;    
        </script>
    </div>

JavaScript问题

6 个答案: