Trap the "Image" loading event on an SVG element in IE11
<p>Hopefully someone has already resolved this, so it should be easy.</p>

<p>The closest I've come on SO already is this question:</p>

<p><a href="https://stackoverflow.com/questions/11390830/is-it-possible-to-listen-image-load-event-in-svg">Is it possible to listen image load event in SVG?</a></p>

<p>which hasn't helped.</p>

<h1>Scenario</h1>

<p>I'm using a 3rd party toolkit to create an SVG graphic in a custom document editor I'm creating.</p>

<p>This 3rd party toolkit creates SVG '..' tags to hold the images being edited.</p>

<p>Specifically, it creates an output as follows:</p>

<pre><code>&lt;g transform="translate(0.5,0.5)" style="visibility: visible;"&gt;
  &lt;image x="4.68" y="0" width="469" height="81" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="genimage?1453893356324" preserveAspectRatio="none"&gt;
  &lt;/image&gt;
&lt;/g&gt;
</code></pre>

<p>Part of the application, needs to know when all of the images have finished loading so that it can complete an initialisation task.</p>

<p>In order to provide this notification of image loading Iv'e added a 'load' event handler to the elements using jQuery.</p>

<p>I can't add an "onLoad" or modify the '' tag being generated as I don't have access to it.  The soonest I have access to it is when the svg has already been injected into the dom by the 3rd party toolkit, by which time the loading is already under way and I can't attach or modify anything because I'm too late to influence the operation.</p>

<h1>What Iv'e tried and what's happening</h1>

<p>My adding of the 'load' event works perfectly fine in Chrome and Firefox.  I'm adding the following:</p>

<pre><code>$('g image').on('load', (e) =&gt; {
  console.log("Image Loaded");
  console.log(e);
});
</code></pre>

<p>And that works perfectly fine except in IE</p>

<p>I'm not targeting anything except IE11 (IE10 at a push but nothing less), but no matter what I try, IE11 just does not trigger the event.</p>

<p>Now, here's a slightly strange twist to the tale.</p>

<p>Before I set this event up, and before I tell the 3rd party product to load it's images, I have a single place holder image that's loaded just using a standard</p>

<pre><code>documentMockImage: HTMLImageElement = new Image();
this.documentMockImage.src = "mockimage";
</code></pre>

<p>and, the handler I add, triggers in IE to tell me that the mock image loaded <em>(Which is not what I want)</em> but in Chrome &amp; FF it triggers as expected for each loaded image in the graph, but NOT for the image place holder <em>(Which is the behaviour I do want)</em></p>

<p><strong>So my question is this:</strong>
How can I get a uniform behaviour, that tells me after each individual image in the svg graph, that works across IE11, Chrome &amp; FF.</p>

<p>To answer the questions I can hear people already asking me:</p>

<ul>
<li>YES, I'm using typescript, but that shouldn't matter to how this is solved.</li>
<li>The 3rd party toolkit is 'MxGraph'/'JGraph', but this is NOT a toolkit specific question it's an SVG image question</li>
<li>No I can't provide sample code (Other than what I've already shown) this is a closed project</li>
<li>YES, I do have jQuery in the project, and yes I can use that, but I CAN also use native, I would however rather NOT have to add any more dependencies/libraries
*The project currently uses, jQuery, Knockout, Bootstrap &amp; Require, in typescript, coding to ES6 standards and transpiling to ES5 on output.</li>
</ul>

<p>If anyone can offer any suggestions to solving this, it would be muchly appreciated.</p>

<h1>UPDATE 1</h1>

<p>Continuing on researching this, I decided just to see what each browser was finding natively, so I added the following:</p>

<pre><code>var svgImages = document.getElementsByTagName('image');
console.log(svgImages);
</code></pre>

<p>Chrome &amp; FF as expected returned the 4 SVG Images in my document</p>

<p><a href="https://i.stack.imgur.com/M6sVv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6sVv.png" alt="Images in Chrome Debugger"></a></p>

<p><a href="https://i.stack.imgur.com/UH6GZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UH6GZ.png" alt="Images in Firefox debugger"></a></p>

<p>Internet explorer however, adds not only 'image' tags from svg, but 'img' tags from elsewhere in the doc too</p>

<p><a href="https://i.stack.imgur.com/XhT3t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XhT3t.png" alt="Images in the IE debugger"></a></p>

<p>This would suggest that IE either deliberately does this, or can't tell the difference between 'image' &amp; 'img'</p>