1

正如标题所示，当具有特定 id 或 CSS 类的元素插入 DOM 时，我想检测确切的时间戳（并可能检测它何时被删除）。最明显的方法是定期轮询文档，通过调用document.getElementById我要查找的元素的 id，但这种方法不是很准确，如果我有多个要检测的元素，可能会非常消耗性能。

我查看了Mutation Events和Mutation Observers，但据我了解，为了检测元素是否被插入或删除，我必须向根 DOM 元素添加一个侦听器，如果需要，这会严重影响性能每次从页面插入或删除元素时执行额外的 JS。

是否有我不知道的更优化的解决方案？另外，如果我不使用外部 JS 库，甚至是 jQuery，我会更喜欢。

4

2 回答 2

4

事实证明，有一种更有效的方法可以通过使用 CSS 动画事件来检测何时插入特定节点。

您可以为您正在收听的课程定义一个不引人注意的动画，让我们说widget_inserted：

@keyframes widget_inserted {  
    from { z-index: 1; }
    to { z-index: 1; }   
}

.widget {
    animation-duration: 0.001s;
    animation-name: widget_inserted;
}

我选择了 z-index 属性，因为在大多数情况下，它几乎不会对插入的元素产生任何附加影响。结合非常短的动画持续时间，这些添加的 CSS 属性应该不会对原始文​​档产生额外的更改。

因此，现在如果您将animationstart事件侦听器附加到文档，您应该能够捕捉到widget插入具有该类的元素的确切时刻：

document.addEventListener('animationstart', function(event) {
    if (event.animationName == 'widget_inserted') {
        ...
    }
});

您可以在此处查看现场演示

于 2014-06-20T08:58:58.350 回答
1

iframe元素触发load/unoad事件。iframe您可以在要观看的元素中插入哑铃......并自己在原始元素中触发“加载”事件。

function watch($ele){
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $ele.appendChild($iframe);
    $iframe.addEventListener('load', function(){
      var event = new CustomEvent('load');
      $ele.dispatchEvent(event);
    });
}

完整示例

于 2014-08-03T17:11:28.853 回答