title: How to check if a script is loading external data?
body: <p>I have this piece of code in a web site:</p>
  
  <pre><code>&lt;div id="test"&gt;
    &lt;script type="text/javascript"&gt;
      /*&lt;![CDATA[*/
      parameter1 = 'whatever1';
      parameter2 = 'whatever2';
      parameter3 = 'whatever3';
      etc.
      /*]]&gt;*/
    &lt;/script&gt;
    &lt;script src='external js file'&gt;&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code is used to load an image in that site from an external source. When they (whoever they are) configure the external source properly, the div 'test' will show an image. If not, div will be blank.</p>
  
  <p>Ok, now let's suppose that another div in that site must show a certain content depending if the image is loaded, and a different content if not. </p>
  
  <p>The external source is not accessible/editable, so it's unknown if they (whoever they are) are sending data for a image to be load or not.</p>
  
  <p>So, is there a way to foreknow/detect in the code if the div 'test' is loading data?</p>
  
  <p><strong>Edit 04/12/2016</strong></p>
  
  <p>Finally I have used this, thanks to cFreed suggestion:</p>
  
  <pre><code>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);
  </code></pre>