javascript - MutationObserver 没有显示所有突变？

Question

我有一个第 3 方脚本，可以在我的页面上加载一个图片库，其中包含来自场外的图像。

我的页面开始时是空的:

  <div class="container-fluid" id="cincopa">

  </div>

然后第 3 方脚本会添加其他内容(例如照片库的框架):

      <div class="container-fluid" id="cincopa">
        <div id="cp_widget_38cc1320-f4a4-407a-a80e-1747bd339b64">

        </div>
      </div>

最后加载图像:

      <div class="container-fluid" id="cincopa">
        <div id="cp_widget_38cc1320-f4a4-407a-a80e-1747bd339b64">
          <div class="galleria_images">
            <div class="galleria_image">SomeImage</div>
            <div class="galleria_image">SomeImage</div>
            <div class="galleria_image">SomeImage</div>
          </div>
        </div>
      </div>

我想:

• 显示加载动画

• 在 $('#cincopa')

  上设置一个 MutationObserver

• 当它检测到 $('.galleria_image') 已创建时，这意味着图像已加载，因此我可以

• 移除加载动画

代码:

var target = document.querySelector('#cincopa');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    console.log(mutations);
    mutations.forEach(function(mutation) {
      console.log(mutation.type);
    }); 
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// start the observer, pass in the target node, as well as the observer options
observer.observe(target, config);

问题是 MutationObserver 仅控制台记录一个突变，而 MutationRecord 在其数组中只有一个突变。当第 3 方脚本创建 DOM 元素时，我预计会有很多变化。

我是否误解了 MutationObserver 的工作原理？

这是解决方案

// This is MeteorJS creating the loading spinning thing
var loadingView = Blaze.render(Template.loading, $('#cincopa')[0]);

// select the target node
var target = document.querySelector('#cincopa');

// create an observer instance
var observer = new MutationObserver(function(mutations) {

  mutations.forEach(function(mutation) {
    if(mutation.target.className === "galleria_image"){
        // a image has been loaded, so remove the loading spinner and 
        // kill the observer
        Blaze.remove(loadingView);
        observer.disconnect();
    }
  }); 

});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true, subtree: true };

// start the observer, pass in the target node, as well as the observer options
observer.observe(target, config);

更新的解决方案

.forEach 是愚蠢的并且没有跳出循环的好方法，这意味着我正在向 Blaze.remove() 发送多个命令和 observer.disconnect()，即使在找到 .galleria_image 之后也是如此。

所以我改用下划线:

// create an observer instance
var observer = new MutationObserver(function(mutations) {

  var loaded = _.find(mutations, function(mutation){ 
    console.log("observer running");
    return mutation.target.className === "galleria-image";
  });

  if(loaded){
    Blaze.remove(loadingView);
    observer.disconnect();
    console.log("observer stopped");
  };

});

Answer 1

有一个选项可以让您完全按照自己的意愿行事:观察元素的子树。只需添加 subtree: true到 MutationObserver 的 config。

// ...
// In this case case only these two are needed, I believe.
var config = {
    childList: true,
    subtree: true
};
// ...observe

这应该让您知道何时插入了 .gallaria_images。作为旁注，您 (OP) 还应该仔细检查图像是否已加载。