在dom加载之后但在用户可以看到dom之前发生的就绪事件

Question

使用窗口或文档就绪函数遇到的问题是，在某些浏览器中，用户可以看到发生的DOM操作该页面正在加载。例如，如果我要删除窗口内的元素，用户可以先看到图像加载，然后将其删除。

我知道我可以隐藏CSS中的所有内容，然后在执行代码后显示它，但这不是我正在寻找的解决方案。它并不总是工作。首先，因为JS是异步的，所以没有办法知道在所有其他dom操作完成后你的show函数将会触发。

基本上我想要的是一个像文档/窗口准备就绪的函数，除了它在DOM可见之前发生之外。在dom加载之后，但在它可见之前 - 那是我想要执行操作的时候。

Answer 1

没有任何事件可以满足您的需求。 See section 18.2.3。

这被称为Flash of Unstyled Content。 Google搜索会向您显示更多技巧。你说得对。 jQuery最常见的方法是简单地将style="display: none"添加到您的身体标记。然后，在ready事件结束时致电$(body).show()。

@SarahBourt在评论中提供了有关高度计算的好方法。如果您可以支持现代浏览器，并且出于某种原因需要保持高度，则可能需要使用style="opacity: 0"和style="opacity: 1"而不是display来隐藏/显示您的内容。

如果您需要确保所有操作都先完成。然后，您需要手动跟踪所有操作，并且只有在确定完成后才会触发show。

Answer 2

“dom被加载后，但在它可见之前 - 这是我想要 执行我的操作。”

这是不可能的，因为那段时间不存在。

浏览器在DOM完全加载之前就开始显示DOM，所以没有时间加载DOM并且它不可见。

可以得到的最接近的结果是将脚本标记放置在要使用的元素之后，但即使此时用户也可能会看到该元素一会儿。

元素在被解析后可以立即显示，并且没有可用于在元素解析和元素变为可见之间进入的事件。在页面加载时使元素可靠隐藏的唯一方法是使用CSS在它存在之前使其不可见。