检测浏览器DOM更改是否完成 [英] Detect browser DOM changes complete

问题描述

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

I have a JavaScript code that adds new XHTML to already existing page (DOM tree). My page elements are dynamic, so adding new elements causes changes in other elements size. I have a custom scroll bar implementation that depends on those sizes and needs to be reset every time they change.

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

I call the reset method shortly after the statement that inserts the new XHTML. But it seems that this is too soon. Sometimes the scrollbar does not adjust properly. If I add some delay before reset, it is OK, but I consider it too crude and unreliable solution.

我需要：

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

Detect when given DOM element completes change of size

或

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

So far I could not find nothing. I know the situation is too complex for most people, but I hope somebody will be able to help. Thanks!

推荐答案

您在检查dom状态时进行一些轮询怎么样？这是jQuery，每当页面正文中的html进行更新的时间最长为半秒时，就会调用 resetMyScrollbar 。

How about some polling where you check the state of the dom? This is with jQuery and will call resetMyScrollbar whenever the html in the page body updates with a maximum half second delay.

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

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

In real life I'd use a hash function and compare hashes as comparing huge strings is wasteful.

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

编辑

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

Or you could check the height of whatever the scroll bar is for.

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

这篇关于检测浏览器DOM更改是否完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！