Question

我希望在特定元素及其所有子元素都在DOM中时执行代码。我知道如何使用MutationObserver轮询所需元素的存在，甚至更好，但所需元素本身相当大，我无法确定所有元素＆＃ 39;孩子们只是根据它存在而满载。

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

我确实找到了on函数，我喜欢这样一个事实：它将被称为甚至不存在的元素：

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

...但是，我不知道为一个完全在DOM中的html元素而触发的事件。

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

另一方面，现有对象的事件会很有趣。这样我就不必使用MutationObserver。

Answer 1

由于您已经说过，您尝试辨别的是当页面的源HTML中存在元素及其所有子元素时，您可以执行以下操作：：

您可以在最后一个孩子之后测试是否存在任何已知元素。由于HTML元素按顺序按顺序加载，如果最后一个子元素之后的元素存在，那么它之前的所有内容必须已经在DOM中，因为页面HTML仅按照它在页面HTML源中出现的顺序插入。
如果您在页面中的相关HTML之后添加了<script>标记，那么当该脚本标记运行时，该<script>标记之前的所有HTML都将位于DOM中。
你可以轮询或使用变异观察者，但是这很有可能真的对你没有帮助，因为当DOM解析器正在将一堆HTML插入页面时，没有脚本运行。因此，您的脚本或突变事件只会在插入整个页面DOM之后或页面暂停时才会运行，以便加载其他内联资源，例如<script>标记。
您可以回退到DOMContentLoaded事件，它将告诉您何时加载整个DOM。

要获得更具体的帮助，我们需要更多地了解您的具体情况，包括您要注意的HTML示例，以及您对所拥有的约束的完全理解（您可以在页面源以及页面中可以插入或运行脚本的位置。）

Answer 2

您需要设置一个计时器并继续观察DOM检查元素是否存在

function checkIfLoaded( callBack, elementSelector )
   setTimeout( function(){

     $( elementSelector ).size() == 0 )
     {
        //continue checking
       checkIfLoaded( callBack, elementSelector )
     }
     else
     {
        callBack();
     }
   }, 1000 );
)

checkIfLoaded( function(){ alert( "div loaded now" ) }, "#divId" );

JQuery：检测元素和所有子元素的加载时间

2 个答案: