检测浏览器DOM更改完成

Question

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

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

我需要：

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

或

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

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

Answer 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();
  ...

Answer 2

尝试onload事件。