javascript - 布局阶段完成后显示 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);

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