Czy można przesłuchać ładowanie obrazu w SVG?

Question

Czy można przesłuchać zdarzenia ładowania <image> w SVG? Jeśli tak, jak to zrobić?

Answer 1

Tak, jest to możliwe.

W znacznikach:

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

Zobacz jsfiddle.

W skrypcie:

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

Zobacz jsfiddle.

Answer 2

Okazało się, że to nie będzie działać dla SVG obiektu utworzonego przy użyciu D3, ale odpowiedź tutaj pracował wielki:

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

Na przykład to działało:

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

Ale tego nie zrobił praca:

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

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