javascript - MutationObserver 未显示所有突变？

Question

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

我的页面开始时是空的:

  <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)还应该仔细检查发生这种情况时图像是否已加载。