加载完成后显示 HTML 页面答案

【问题标题】：display HTML page after loading complete加载完成后显示 HTML 页面
【发布时间】：2011-04-07 11:36:34
【问题描述】：

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

【问题讨论】：

我喜欢能够在页面完全加载之前就开始阅读，尤其是当我的连接速度很慢时。
可能不会达到您建议的程度（包括脚本），我认为这闻起来是糟糕的设计。为什么要这样做？
@tdammers 为什么这是一个糟糕的设计？例如如果页面是基于本地化的，并且在加载时根据浏览器语言等在 JS 中更改了语言，那么您会在几毫秒内看到整个英文文本，然后它变为定义的语言。另一个在文本中有占位符的例子，你必须在 JS 中替换，效果相同。

【解决方案1】：

最初隐藏正文，然后在加载后使用 jQuery 显示它。

body {
    display: none;
}

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

此外，最好将$('body').show(); 作为最后一个主 .js 文件的最后一行。

【讨论】：

【解决方案2】：

你也可以这样做....这只会在加载 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>

【讨论】：

` $(window).on("load", function() { ` 如果您使用的是 jquery 3。

【解决方案3】：

最简单的做法是将div 与以下CSS 放在正文中：

#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 中不起作用 - 我知道在该浏览器中没有可靠的方法）

像这样添加DIV（直接在打开body标签之后）：

<div style="display: none" id="hideAll">&nbsp;</div>

在 : 之后直接显示 DIV：

 <script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script>

并隐藏它onload:

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

或使用 jQuery

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

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

【讨论】：

既然你是用id调用它，就把.hideAll改成#hideAll
我个人认为是时候停止对 ie6 的支持了.. 解决这个问题很麻烦
它几乎适用于我的情况。我尝试隐藏 dojo 测试应用程序中的所有 html 元素，但它仍然显示一秒钟尚未格式化的 html 元素。但是，在所有元素完成加载过程后，它仍然成立
非常感谢佩卡。如何正确命名此页面？ “加载页面”，“介绍屏幕”？还是什么？
位置：固定；块滚动。甚至没有必要。

【解决方案4】：

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

否则您可以使用基于状态的编程，其中事件发生在浏览器的特定状态..

【讨论】：

【解决方案5】：

在页面上放置一个叠加层

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

然后在 window.onload 处理程序中删除该元素，或者隐藏它

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

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

【讨论】：

另外，如果禁用了 javascript，这将永远不会显示页面......请参阅@Pekka웃 的答案以获得更安全的内容。
@Tao 你可以使用modernizer来判断浏览器是IE6还是javascript被禁用。