是否可以在 SVG 中监听图像加载事件？答案

【问题标题】：Is it possible to listen image load event in SVG?是否可以在 SVG 中监听图像加载事件？
【发布时间】：2012-07-08 14:27:21
【问题描述】：

是否可以在 SVG 中监听 <image> 加载事件？如果是，该怎么做？

【问题讨论】：

“真实”和“可能”的意思一样吗？
你所说的是指？
SVG 标签，不是任何 html 标签

标签： javascript image svg load

【解决方案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。

【讨论】：

我无法让这个工作，既没有标记也没有脚本；能举个例子吗？
w3.org/TR/SVG/interact.html#SVGEvents，您是否尝试过引用的 externalResourcesRequired 属性，如链接所述？
@neo: 这里不需要 externalResourcesRequired 属性。
看来，firefox 根本不会触发元素的加载事件。但是，所有其他浏览器都可以，请参阅此测试用例 xn--dahlstrm-t4a.net/svg/events/load-events/image-root.svg。
正确，open Firefox bug 缺少 load 事件 <image>。我建议像 img = new Image(); img.onload = …; img.src = 'example.png' 这样加载图像，而不是像 Erik 的示例中那样使用 svg image 标签。

【解决方案2】：

我发现这不适用于使用 D3 创建的 SVG 对象，但这里的答案很有效：

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

例如这有效：

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'); });

【讨论】：

但属性名称为 HTML：onload。但事件名称不同：SVGLoad 不是 load。见w3.org/TR/SVG/interact.html#LoadEvent
但是在第二个例子中，加载事件是在设置了 xlink:href 属性之后设置的，所以如果图像加载足够快，事件可能不会被触发
您通常需要先设置一个事件侦听器，然后再设置触发所述事件侦听器的数据，以避免在设置事件侦听器之前完成数据的竞争条件。在第二个示例中，除非您将.attr("xlink:href", src) 第二个放在img.addEventListener('load', function() { console.log('loaded'); }); 之后，否则它将不起作用 - 请注意在对您有用的示例中，首先设置 onload attr，然后再设置 src。