Замените dom-контент, который динамически добавляется скриптом после загрузки страницы до ее рендеринга.

Question

Допустим, есть страница со сценарием, которая добавляет новое изображение к телу с произвольными временными интервалами, и я хочу поменять местами эти изображения до того, как они будут отрисованы Chrome.Код ниже делает это, но после того, как исходные изображения уже отрендерены:

function swap(node) {
  var elements = document.getElementsByTagName("img-shadow");
  Array.prototype.forEach.call(elements, function(element) {
      var img = element.querySelector('img#img');
      if (img && img !== null && img.width === 512) {
          img.src = "some url";
      }
  });
}

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      if (!mutation.addedNodes) return
      for (var i = 0; i < mutation.addedNodes.length; i++) {
          var node = mutation.addedNodes[i]
          swap(node);
      }
  })
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: false
})