Search code examples
javascriptimagesvgload

Is it possible to listen image load event in SVG?

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

Solution

  • 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.