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

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 必须显示特定内容，具体取决于图像是否已加载，如果没有则显示不同的内容。

外部源不是 accessible/editable，因此不知道他们（无论他们是谁）是否正在发送数据以加载图像。

那么，如果 div 'test' 正在加载数据，有没有办法在代码中 foreknow/detect？

编辑 2016 年 4 月 12 日

终于用上了，感谢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

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

How to check if a script is loading external data?

javascript

external

cdata