Is it possible to listen image load event in SVG?

Question

Is it possible to listen for an <image> load event in SVG? If yes, how to do this?

Solution 1

Yes it's possible.

In markup:

<image xlink:href="example.png" width="10" height="10" 
       onload="alert('loaded')"/>

See jsfiddle.

In script:

<script>
  var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
  img.addEventListener('load', function() { alert('loaded'); });
  // or alternatively:
  // img.onload = function() { alert('loaded'); }
  img.width.baseVal.value = 100;
  img.height.baseVal.value = 100;
  img.href.baseVal = "example.png";
</script>

See jsfiddle.

Solution 2

I found that this would not work for SVG object created using D3, but the answer here worked great:

How can I display a placeholder image in my SVG until the real image is loaded?

For example this worked:

var img = innerG.append("image")
    .attr('onload', function() {
        console.log('loaded');
    })
    .attr("xlink:href", src)
    .attr("width", size)
    .attr("height", size);

But this did not work:

var img = innerG.append("image")
    .attr("xlink:href", src)
    .attr("width", size)
    .attr("height", size);

img.addEventListener('load', function() { console.log('loaded'); });

Comments

[Rustam]

SVG <image> tag, NOT any html tags

[Richard]

I'm unable to get this working, neither with markup nor script; are you able to provide an example?

[neo]

w3.org/TR/SVG/interact.html#SVGEvents, have you tried the referenced externalResourcesRequired attribute, as mentioned the link?

[Erik Dahlström]

@neo: the externalResourcesRequired attribute is not necessary here.

[Erik Dahlström]

It appears that firefox doesn't fire load events for <image> elements at all. All other browsers do however, see this testcase xn--dahlstrm-t4a.net/svg/events/load-events/image-root.svg.

[fregante]

Correct, there's an open Firefox bug for the lack of the load event on <image>. I would suggest loading the image like img = new Image(); img.onload = …; img.src = 'example.png' instead of using an svg image tag like in Erik's example.

[mems]

But the attribute name is as HTML: onload. But the event name is different: SVGLoad not load. See w3.org/TR/SVG/interact.html#LoadEvent

[daslicht]

the onload event is not fired in chrome here

[Erik Dahlström]

@daslicht I checked the first example in Chrome Canary just now, and it seems to fire the load event - see jsfiddle.net/749WG/49. If the image url is broken (server offline or similar) then no load will be fired, but you can also listen for the error event.

[daslicht]

@ErikDahlström yeah inline in html it is firing, but not if attached via js. As far as I know know iot is by design sicne Chome use strict. I havent managed tho, to get the content of a svg which is loaded into an image tag yet.

[Erik Dahlström]

@daslicht I just updated the js fiddle example, jsfiddle.net/ZXdxc/81, and from what I can tell Chrome does fire load events. Perhaps post a new question with your non-working example?

[daslicht]

@ErikDahlström yeah that works in chome but not safari :)

[mgraham]

But in the second example, the load event is set up after the xlink:href attribute is set, so if the image loading is quick enough the event may not get triggered

[OG Sean]

You generally need to set an event listener first, before setting data that triggers said event listener, to avoid race conditions where the data is done before the event listener can even be set. In the 2nd example, it will not work unless you put the .attr("xlink:href", src) second, after the img.addEventListener('load', function() { console.log('loaded'); }); - notice how in the example that worked for you, the onload attr is set first, before setting src.