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

Question

一旦所有内容都可用并且在网页中正确定位，我想显示内容。大多数预加载器技术仅考虑下载时间，而不考虑渲染时间，因此让用户看到正在构建的页面。这很简短，但显而易见。我在本机应用程序中使用WebKit，但这不重要。

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

Answer 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中明确指定图片尺寸。