布局阶段完成后显示 HTML 内容

【问题标题】：Display HTML content once the layout phase is complete布局阶段完成后显示 HTML 内容
【发布时间】：2013-10-09 19:52:12
【问题描述】：

我想在所有内容都可用并在网页中正确定位后显示内容。大多数预加载器技术只考虑下载时间，而不是渲染时间，因此让用户看到正在构建的页面。这很短，但很明显。我在本机应用程序中使用 WebKit，但这没关系。

在页面完全准备好之前延迟内容显示的正确方法是什么？

【问题讨论】：

使用visibility:hidden隐藏body，然后使用js onready/load()取消隐藏。您可以在 noscript 块中放置一个样式来取消隐藏它，以服务非 js 浏览器。
@dandavis，最好将您解释得更清楚的解决方案作为答案。
这就是我所说的经典预加载器技术：$.ready() 将在布局完成之前发生。我可以通过setTimeout 实现我想要的，但我确信有更好的方法。
How do you execute a Javascript function when the page has fully rendered?的可能重复

标签： javascript html rendering delay preloader

【解决方案1】：

如上所述，您最初可以将所有内容设置为 visibility:hidden

<div id="content" style="visibility:hidden">
   <!-- all your content 
        (won't be displayed, as long as they are not explicitly
         visibility:visible) -->
</div>

取消隐藏所有内容的 javascript 非常简单：

function unhide() { document.getElementById("content").style.visibility = ""; }

要在加载所有内容 时调用它，请使用load 事件：

document.addEventListener('load', unhide, false);

我认为 jQuery ready() 处理程序实际上在现代浏览器中侦听 DOMContentLoaded 事件，因此它会在您的图像加载之前运行。如果您只需要在显示所有内容之前固定布局，则可以使用ready() 或DOMContentLoaded，但请务必在 HTML 中明确指定图像尺寸。

【讨论】：