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

hopefully has resolved this, should easy.

the closest i've come on question:

is possible listen image load event in svg?

which hasn't helped.

scenario

i'm using 3rd party toolkit create svg graphic in custom document editor i'm creating.

this 3rd party toolkit creates svg '..' tags hold images being edited.

specifically, creates output 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 application, needs know when of images have finished loading can complete initialisation task.

in order provide notification of image loading iv'e added 'load' event handler elements using jquery.

i can't add "onload" or modify '' tag being generated don't have access it. soonest have access when svg has been injected dom 3rd party toolkit, time loading under way , can't attach or modify because i'm late influence operation.

what iv'e tried , what's happening

my adding of 'load' event works fine in chrome , firefox. i'm adding following:

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

and works fine except in ie

i'm not targeting except ie11 (ie10 @ push nothing less), no matter try, ie11 not trigger event.

now, here's strange twist tale.

before set event up, , before tell 3rd party product load it's images, have single place holder image that's loaded using standard

documentmockimage: htmlimageelement = new image(); this.documentmockimage.src = "mockimage"; 

and, handler add, triggers in ie tell me mock image loaded (which not want) in chrome & ff triggers expected each loaded image in graph, not image place holder (which behaviour want)

so question this: how can uniform behaviour, tells me after each individual image in svg graph, works across ie11, chrome & ff.

to answer questions can hear people asking me:

• yes, i'm using typescript, shouldn't matter how solved.
• the 3rd party toolkit 'mxgraph'/'jgraph', not toolkit specific question it's svg image question
• no can't provide sample code (other i've shown) closed project
• yes, have jquery in project, , yes can use that, can use native, rather not have add more dependencies/libraries *the project uses, jquery, knockout, bootstrap & require, in typescript, coding es6 standards , transpiling es5 on output.

if can offer suggestions solving this, muchly appreciated.

update 1

continuing on researching this, decided see each browser finding natively, added following:

var svgimages = document.getelementsbytagname('image'); console.log(svgimages); 

chrome & ff expected returned 4 svg images in document

internet explorer however, adds not 'image' tags svg, 'img' tags elsewhere in doc too

this suggest ie either deliberately this, or can't tell difference between 'image' & 'img'

here's sample kaiido suggested. know sucks, couldn't find other options ie , 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" />