检测浏览器 DOM 更改完成答案

【问题标题】：Detect browser DOM changes complete检测浏览器 DOM 更改完成
【发布时间】：2011-05-04 16:19:48
【问题描述】：

我有一个 JavaScript 代码，可以将新的 XHTML 添加到现有页面（DOM 树）。我的页面元素是动态的，因此添加新元素会导致其他元素大小发生变化。我有一个自定义滚动条实现，它取决于这些大小，每次更改时都需要重置。

我在插入新 XHTML 的语句之后不久调用了 reset 方法。但这似乎为时过早。有时滚动条无法正确调整。如果我在重置之前添加一些延迟，那是可以的，但我认为它太粗糙和不可靠的解决方案。

我需要：

检测给定 DOM 元素何时完成大小更改

或

检测整个 DOM 更改何时完成以及重新布局。

到目前为止，我什么也找不到。我知道情况对大多数人来说太复杂了，但我希望有人能够提供帮助。谢谢！

【问题讨论】：

标签： javascript dom resize

【解决方案1】：

来一些轮询来检查 dom 的状态怎么样？这是使用 jQuery 的，每当页面正文中的 html 以最大半秒延迟更新时，都会调用 resetMyScrollbar。

var lastDom = "";
function checkDomHash() {
  var newDom = $("body").html();
  if (newDom != lastDom) {
    resetMyScrollbar();
  }
  window.setTimeout(checkDomHash, 500);
}

在现实生活中，我会使用哈希函数并比较哈希，因为比较大字符串很浪费。

var lastDomHash = "";
...
  var newDomHash = md5OrWhatever($("body").html());
  ...

编辑

或者您可以检查滚动条的高度。

var lastHeight = 0;
...
  var newHeight = $("#my_element_id").outerHeight();
  ...

【讨论】：

我认为这样我只会比较 DOM 内容并且会知道它什么时候发生变化，那是在重新布局完成之前。我已经尝试过具有相同目的的 DOMNodeInserted，它没有帮助:(
但是你说得有道理，我考虑在目标滚动元素高度实际发生变化时进行一些检测，因为这是我感兴趣的。

【解决方案2】：

试试 onload 事件。

【讨论】：