Chrome 突变观察者答案

【问题标题】：Chrome Mutation ObserverChrome 突变观察者
【发布时间】：2014-05-22 09:49:32
【问题描述】：

我正在尝试使用 Chrome 中的 Mutation Observer 来监控何时添加新图像，这是我目前的代码：

var observer = new window.MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var m = mutation;
        //console.log(m);
        for (var j = 0; j < m.addedNodes.length; j++)
        {
            var nodes=m.addedNodes[j];
            if (!nodes || !nodes.querySelectorAll)
            {
                // Not all nodes support querySelectorAll, e.g. text nodes.
                continue;
            }

            var imgs= nodes.querySelectorAll("img");
            for (var k = 0; k < imgs.length; k++)
            {
                if(imgs[k].src != undefined)
                {
                    var img = imgs[k];
                    console.log(img);
                }
            }
        }
    });
});

var config = { childList: true };
// pass in the target node, as well as the observer options
observer.observe(window.document, config);

发生了一件奇怪的事情：似乎调用了回调，但没有找到任何图像。当我打开控制台时（Ctrl+Shift+J），代码开始正常工作，所有图像此时添加的内容会被打印出来。当我重新调整打开的控制台大小时，也会发生同样的事情。

我是否必须为配置值设置其他参数？为什么突然打开控制台让代码工作？

【问题讨论】：

有关如何添加新图像的任何详细信息？是通过在 dom 中创建 <img> 元素添加的吗？或者已经有一个<img> 而你只是更改了src 属性？

标签： javascript google-chrome mutation-observers

【解决方案1】：

文档的子列表几乎从不改变。它通常只是一个<html> 孩子。您可能希望在您的config 中添加subtree: true，以便在文档深处添加图像时观察者会运行。

这并不能解释为什么控制台打开时代码可以工作。

【讨论】：