是否有可能在SVG听图像加载事件？(Is it possible to listen image l

是否有可能用于监听<image>在SVG加载事件？ 如果是，如何做到这一点？

Answer 1:

是的，它是可能的。

在标记：

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

见的jsfiddle 。

在脚本：

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

见的jsfiddle 。

Answer 2:

我发现，这不会对使用D3创建SVG对象的工作，但这里的答案伟大的工作：

我怎样才能显示我的SVG的占位符图像等到真正加载图像？

例如这工作：

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

但这并没有工作：

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

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

文章来源: Is it possible to listen image load event in SVG?