title: Is there a Javascript event fired when currentSrc for an <img> tag changes?
body: <p>Suppose I have an <code>&lt;img&gt;</code> tag:</p>
  <pre><code>&lt;img id=&quot;my_tag&quot; src=&quot;/default.jpg&quot; srcset=&quot;/small.jpg 500w, /medium.jpg 1000w, /large.jpg 2000w&quot;&gt;
  </code></pre>
  <p>When I load the page, JavaScript can tell me which of the <code>srcset</code> it is using:</p>
  <pre><code>document.getElementById(&quot;my_tag&quot;).currentSrc
  </code></pre>
  <p>How can I detect when <code>currentSrc</code> changes and fire an event?</p>
  <p>To stave off the cries of &quot;duplicate!&quot; I can confirm that it doesn't fire in Chrome using DOM MutationObserver <a href="https://stackoverflow.com/a/22736833/1496552">code here</a>, using <a href="https://github.com/kapetan/jquery-observe" rel="nofollow noreferrer">jQuery observe</a>, or using the <code>onload</code> event:</p>
  <pre><code>var my_tag = document.getElementById(&quot;my_tag&quot;);
  my_tag.onload = function(){
      alert(&quot;CHANGED&quot;);
      console.log( &quot;Src changed to &quot; + my_tag.currentSrc );
  };
  </code></pre>
  <p>I think this is because when <code>srcset</code> is used it doesn't seem to update the DOM when currentSrc changes.</p>