È possibile ascoltare l'evento di caricamento delle immagini in SVG?

Question

È possibile ascoltare un evento di caricamento <image> in SVG? Se sì, come si fa?

Answer 1

Sì, è possibile.

In marcatura:

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

Vedi 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> 

Vedi jsfiddle.

Answer 2

ho trovato che questo non avrebbe funzionato per oggetto SVG creati utilizzando D3, ma la risposta qui funzionava benissimo:

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

Per esempio, questo ha funzionato:

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

ma questo non ha lavoro:

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

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