Trap the "Image" loading event on an SVG element in IE11

Question

Hopefully someone has already resolved this, so it should be easy.

The closest I've come on SO already is this question:

Is it possible to listen image load event in SVG?

which hasn't helped.

Scenario

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

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

Specifically, it creates an output as follows:

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

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

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

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.

What Iv'e tried and what's happening

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

$('g image').on('load', (e) => {
  console.log("Image Loaded");
  console.log(e);
});

And that works perfectly fine except in IE

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.

Now, here's a slightly strange twist to the tale.

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

documentMockImage: HTMLImageElement = new Image();
this.documentMockImage.src = "mockimage";

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

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

To answer the questions I can hear people already asking me:

YES, I'm using typescript, but that shouldn't matter to how this is solved.
The 3rd party toolkit is 'MxGraph'/'JGraph', but this is NOT a toolkit specific question it's an SVG image question
No I can't provide sample code (Other than what I've already shown) this is a closed project
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 & Require, in typescript, coding to ES6 standards and transpiling to ES5 on output.

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

UPDATE 1

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

var svgImages = document.getElementsByTagName('image');
console.log(svgImages);

Chrome & FF as expected returned the 4 SVG Images in my document

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

This would suggest that IE either deliberately does this, or can't tell the difference between 'image' & 'img'

For the update part, yes IE is buggy with `` tag, but this allowed us to [do some fallbacks](https://css-tricks.com/svg-fallbacks/) :-P Now for your issue, you've to know that Safari doesn't fire the load event on `` either. The only cross-browser solution I have found is to create some HTMLImage objects, set their `.src` to the ``'s `href` and listen to the HTMLImage load event. — Kaiido, Jan 28 '16 at 03:02
So basically, I need to find a way of over-riding the 3rd party toolkit, to make it produce 'img' tags, then that way I can reliably trap the load event in all browsers? LOL... pretty much what I was fearing I'd have to do, you'd think all the manufacturers would have learned to play nice together by now.. it really irks me sometimes that we still have to put up with this nonsense, HTML5 was supposed to put an end to all this. — shawty, Jan 28 '16 at 14:47
Well I would just search for all svg images and then produce HTML ones but it's up to you. — Kaiido, Jan 28 '16 at 15:22
ok kewl, well it's a sane reply :-) Put it in as an answer and I'll mark it as accepted .... — shawty, Jan 28 '16 at 16:24
just on an alternate note, I went hunting down the drawing code in the 3rd party lib and figured out some new stuff that's helped me start to get img tags too, unfortunately I can't share that code as it's commercial. — shawty, Jan 28 '16 at 16:26

score 3 · Accepted Answer · answered Oct 17 '16 at 08:58

Here's a sample that Kaiido suggested. I know it sucks, but I couldn't find any other options for IE and Edge.

var url = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
var svg = document.getElementById('svg');
var img = document.createElementNS("http://www.w3.org/2000/svg", 'image');

var dummy = new Image();
dummy.addEventListener('load', function()
{
  console.log("dummy onload");
  img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", url);
  img.setAttribute("width", dummy.width);
  img.setAttribute("height", dummy.height);
  svg.appendChild(img);
}, false);
dummy.src = url;

<svg id="svg" width="1000px" height="500px" />

Given that I've left this project now (About 1.5 years ago) and no one else submitted an answer, by default you get the accepted :-) (PS: sorry it took until now before I noticed it) — shawty, Jun 04 '19 at 20:44

Trap the "Image" loading event on an SVG element in IE11

Scenario

What Iv'e tried and what's happening

UPDATE 1

1 Answers1