MutationObserver не показывает все мутации?

Question

У меня есть сторонний скрипт, который загружает фотогалерею на моей странице с изображениями, поступающими с сайта.

Моя страница начинается пустой:

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

    </div> 

Сценарий третьей стороной добавляет другой материал (например, в рамках фотогалерее):

 <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> 

Я хочу:

• дисплея загрузочной анимации

• установить MutationObserver на $('#cincopa')

• , когда он обнаруживает, что $('.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 имеет только одну мутацию в своем массиве. Я ожидал бы многочисленных мутаций, поскольку сторонний скрипт создает элементы 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 туп и не имеет хороший способ вырваться из цикла, а это означает, что I получал несколько команд до Blaze.remove() и observer.disconnect(), даже после того, как .galleria_image был найден.

Так что я использовал underscore вместо:

// 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 в ваш config для MutationObserver.

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

Это позволит вам понять, когда .gallaria_images был включен. В качестве дополнительной заметки вы (OP) также должны дважды проверить, загружены ли изображения, когда это произойдет.