如何检查脚本是否正在加载外部数据？

Question

我在一个网站上有这段代码：

<div id="test">
  <script type="text/javascript">
    /*<![CDATA[*/
    parameter1 = 'whatever1';
    parameter2 = 'whatever2';
    parameter3 = 'whatever3';
    etc.
    /*]]>*/
  </script>
  <script src='external js file'></script>
</div>

此代码用于从外部源加载该站点中的图像。当他们（无论他们是谁）正确配置外部源时，div 'test' 将显示图像。如果不是，则 div 将为空白。

好的，现在让我们假设该站点中的另一个 div 必须显示特定内容，具体取决于图像是否已加载，如果未加载，则必须显示不同的内容。

外部源不可访问/不可编辑，因此不知道他们（无论他们是谁）是否正在发送要加载的图像的数据。

那么，如果 div 'test' 正在加载数据，有没有办法在代码中预知/检测？

编辑 04/12/2016

感谢 cFreed 的建议，我终于用上了这个：

var target = document.getElementById('test');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    //stuff;
  });    
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

Answer 1

你可以使用MutationObserver。

这是一个非常简单的应用程序，适合您的情况。

var observerConfig = {childList: true}, // only notify when children added
    targets = {
      test: false,
      ...other <div>s to observe
    },
    target, elem, observer;

for (var target in targets) {
  elem = document.getElementById(target);

  // create and activate an observer instance
  observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // here we assume that the only changes are children addition
      // so we don't look at anything more precise
      targets[elem] = true;
    });
    observer.observe(elem, observerConfig);
  });
}

// then you can test targets['someTarget'] to know if it had been populated