1

我正在开发一个影响（除其他外）页面上 GIF 图像的 Chrome 扩展程序。我正在努力让它适用于在初始页面加载后动态添加的新图像。这是我添加到内容脚本中以尝试处理这些内容的内容：

function processGif(newTag) {
  console.log(newTag.src);
}

var observer = new MutationObserver(function(mutations, obs) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      var newTag = mutations[i].addedNodes[j];
      if(newTag.tagName == "IMG" && /.gif$/i.test(newTag.src)) {
        processGif(newTag);
      }
    }
  }
});

observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

出于测试目的，我将processGif函数简化console.log为标签src属性的一个。

大多数情况下，它工作得很好，并成功地捕获了在首次加载页面时最初构建 DOM 时创建的所有初始图像。但是在像 Google+ 这样的页面上，当您向下滚动时，MutationObserver 似乎没有捕捉到任何动态加载的帖子。我一直在使用Koushik Dutta 的公共页面进行测试——他喜欢发布 gif。如果您尝试将上述代码粘贴到控制台并向下滚动，您应该能够确认没有检测到动态加载的图像。

为什么我看不到这些动态添加img的标签，我需要做什么来处理像这样动态添加的图像？

4

1 回答 1

4

我想我知道发生了什么。您通过观察者获得的addedNodes列表实际上并不是每个已添加到 DOM 的节点的列表，而是一次添加多个节点时的最上面的一个。

考虑到这一点，您只需处理每个添加的节点及其所有子节点。所以需要修改观察者回调，使其看起来像下面这样。

observer = new MutationObserver(function(mutations, obs) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      var newTag = mutations[i].addedNodes[j];
      if (newTag.querySelectorAll) {
        Array.prototype.forEach.call(
          newTag.querySelectorAll('img[src*=".gif"]'),
          processGif);
      }
    }
  }
});
于 2014-09-07T15:52:12.727 回答