title: MutationObserver and current/computed CSS styles
body: <p>I'm using a MutationObserver to look for added images to a web page. As many images are displayed via the CSS <code>background-image</code> property, I'm checking the current/computed CSS style in addition to looking for <code>img</code> tags, for example...</p>
  
  <pre><code>var hasBackgroundImage = function(node) {
      var nodeStyle = node.currentStyle || getComputedStyle(node, null);
      return (
          nodeStyle &amp;&amp;
          nodeStyle.backgroundImage &amp;&amp;
          nodeStyle.backgroundImage != "none"
          );
  };
  </code></pre>
  
  <p>However, it seems there is a delay between a node triggering a mutation event and the CSS rules being applied so <strong>there appears to be no <code>backgroundImage</code> during the mutation event even though there will be at some point later</strong>. I noticed this when the code worked during debugging (stepping with breakpoints) but didn't work at runtime. Delaying mutation event processing with <code>setTimeout</code> also works but to be certain the delay needs to be quite large and changes from page to page (I'm not sure exactly when the CSS rules are guaranteed to be applied). A possible cause may simply be the delayed load or injection of CSS content.</p>
  
  <p>What's the best way to achieve this functionality? I guess I'm after an on-style-change mutation, but I doubt this exists.</p>