Javascript 加载完成后显示HTML页面

是否有办法强制浏览器仅在页面的所有内容（如图像、脚本、css等）完全加载后才显示页面？

最简单的方法是在正文中放置一个带有以下css的

div

：

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

（请注意，

position:fixed

在IE6中不起作用-我知道在该浏览器中没有可靠的fire方法）

像这样添加DIV（直接在开头

body

tag之后）：

或者使用jQuery

 $(window).load(function() {  document.getElementById("hideAll").style.display = "none"; });

---

这种方法的优点是，它也适用于已关闭JavaScript的客户端。它不应该引起任何闪烁或其他副作用，但没有测试过，我不能完全保证它适用于所有浏览器

在页面上放置一个覆盖层

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

然后在

窗口中删除该元素。onload

处理程序或隐藏它

window.onload=function() {
    document.getElementById('loading-mask').style.display='none';
}

---

当然，如果您正在使用库，您应该使用特定于javascript库（jquery、prototype..）的onload处理程序。

为此尝试使用javascript！ 这似乎是最好最简单的方法。 只有在html页面完全加载之后，您才能使用内置函数来执行html代码

---

或者，如果事件发生在浏览器的特定状态，您可以使用基于状态的编程。

您也可以这样做。。。。这将仅在加载javascript后显示HTML部分

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready

希德尔先生{
可见性：隐藏；
}
$（窗口）。加载（函数（）{
$（“#tabs”）.removeClass（“hideAll”）；
});
##内容##

首先隐藏主体，然后在加载后用jQuery显示主体

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready

---

另外，最好使用

$（'body'）.show（）

作为最后一行和main.js文件中的最后一行。

我喜欢在页面完全加载之前就开始阅读页面，尤其是在连接速度较慢的情况下。可能没有达到您建议的程度（包括脚本），我觉得这有点糟糕的设计味道。你为什么要这样做？@tdammers为什么这是一个糟糕的设计？e、 g.如果页面是基于本地化的，并且在加载时根据浏览器语言等在JS中更改了语言，那么您会在几毫秒内看到整个英文文本，然后它会更改为定义的语言。另一个例子是在文本中有占位符，你必须在JS中替换，效果相同。因为你是通过id调用它，所以修复

.hideAll

到

#hideAll

我个人认为是时候切断ie6的支持了。。这么麻烦的工作几乎适合我的情况。我试图在dojo测试应用程序中隐藏所有html元素，但它仍然会显示一个尚未格式化的html元素。但是，在所有元素完成加载过程后，它仍然有效。非常感谢Pekka。如何正确命名此页？“加载页面”、“介绍屏幕”？还是什么？位置：固定；阻止滚动。在使用jquery 3的情况下，甚至不需要使用.`$（window）.on（“load”，function（）{`如果禁用了javascript，则根本不会显示页面…请参阅@Pekka웃'您可以使用modernizer来确定brower是IE6还是javascript被禁用。

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready