javascript - JQuery:检测何时加载元素和所有子项

Question

我希望当特定元素及其所有子元素都在 DOM 中时执行代码。我知道如何轮询所需元素的存在，或者更好的是，使用 MutationObserver ，但所需的元素本身相当大，我无法确定它的所有子元素是否仅基于它的存在就已完全加载。

我可以等待 ready当加载所有 DOM 时调用它，但页面通常需要相当长的时间来加载。为了速度，我想知道而不必等待 $(document).ready() .

我确实找到了 on函数，我喜欢这样一个事实，即它会被甚至还不存在的元素调用:

$(document).on('SomeEvent', '#desiredElem', handler);

...但是我不知道为完全位于 DOM 中的 html 元素触发的事件。

我的脚本被注入(inject)到浏览器中，我从日志中知道它在 $(document).ready() 之前运行了很长时间。或 DOMContentLoaded .基本上我想利用这一点。我无法添加 <script>不幸的是，标记到 HTML。

附带说明一下，对象存在的事件会很有趣。这将使我不必使用 MutationObserver .

Answer 1

既然您已经说过您要辨别什么是加载页面源 HTML 中存在的元素及其所有子元素的时间，那么您可以做几件事:

1. 您可以测试最后一个子元素之后是否存在任何已知元素。由于 HTML 元素按顺序连续加载，如果存在最后一个子元素之后的元素，那么它之前的所有内容都必须已经在 DOM 中，因为页面 HTML 仅按照它在页面 HTML 源代码中出现的顺序插入。

2. 如果你输入 <script>页面中相关 HTML 之后的标记，然后是其之前的所有 HTML <script>当脚本标签运行时，标签已经在 DOM 中。

3. 您可以轮询或使用变异观察器，但这很可能不会真正帮助您，因为当 DOM 解析器正在向页面中插入一堆 HTML 时，没有脚本运行。因此，您的脚本或突变事件只会在整个页面 DOM 被插入之后或页面暂停以加载一些其他内联资源(例如 <script>)时运行。标签。

4. 您可以回退到 DOMContentLoaded该事件会告诉您整个 DOM 何时加载完毕。

要获得更具体的帮助，我们需要更多地了解您的具体情况，包括您尝试查看的 HTML 示例，以及完全了解您有哪些限制(您可以在页面源代码中修改哪些内容)以及您可以在页面中的什么位置插入或运行脚本)。