javascript - 在 IE11 中的 SVG 元素上捕获 "Image"加载事件

Question

希望有人已经解决了这个问题，所以这应该很容易。

我已经遇到的最接近的问题是这个问题:

Is it possible to listen image load event in SVG?

这没有帮助。

场景

我正在使用第 3 方工具包在我正在创建的自定义文档编辑器中创建 SVG 图形。

此第 3 方工具包创建 SVG“..”标签来保存正在编辑的图像。

具体来说，它创建一个输出，如下所示:

<g transform="translate(0.5,0.5)" style="visibility: visible;">
  <image x="4.68" y="0" width="469" height="81" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="genimage?1453893356324" preserveAspectRatio="none">
  </image>
</g>

应用程序的一部分需要知道所有图像何时完成加载，以便完成初始化任务。

为了提供图像加载的通知，我使用 jQuery 为元素添加了一个“load”事件处理程序。

我无法添加“onLoad”或修改正在生成的“”标签，因为我无权访问它。我最快可以访问它是当 svg 已经通过第 3 方工具包注入(inject)到 dom 中时，此时加载已经在进行中，我无法附加或修改任何内容，因为我来不及影响操作。

我尝试过什么以及发生了什么

我添加的“load”事件在 Chrome 和 Firefox 中运行得非常好。我添加以下内容:

$('g image').on('load', (e) => {
  console.log("Image Loaded");
  console.log(e);
});

除了 IE 之外，这一切都很好

除了 IE11 之外，我不针对任何其他浏览器(IE10 是推送的，但仅此而已)，但无论我如何尝试，IE11 都不会触发该事件。

现在，这个故事有一个稍微奇怪的转折。

在我设置此事件之前，以及在我告诉第 3 方产品加载其图像之前，我有一个仅使用标准加载的占位符图像

documentMockImage: HTMLImageElement = new Image();
this.documentMockImage.src = "mockimage";

并且，我添加的处理程序在 IE 中触发，告诉我模拟图像已加载(这不是我想要的)，但在 Chrome 和 FF 中，它会按预期为每个加载的图像触发图表，但不适用于图像占位符(这是我想要的行为)

所以我的问题是这样的: 如何获得统一的行为，在 svg 图中的每个单独图像之后告诉我，该行为适用于 IE11、Chrome 和 FF。

为了回答我听到人们已经问我的问题:

• 是的，我正在使用 typescript ，但这对于如何解决这个问题并不重要。
• 第 3 方工具包是“MxGraph”/“JGraph”，但这不是工具包特定问题，而是 SVG 图像问题
• 不，我无法提供示例代码(除了我已经展示的代码)，这是一个封闭的项目
• 是的，我的项目中确实有 jQuery，是的，我可以使用它，但我也可以使用 native ，但我宁愿不必添加任何更多的依赖项/库 *该项目目前在 typescript 中使用 jQuery、Knockout、Bootstrap 和 Require，按照 ES6 标准进行编码并在输出时转译为 ES5。

如果有人可以提供任何解决此问题的建议，我们将不胜感激。

更新 1

继续研究这一点，我决定只是看看每个浏览器本身能找到什么，所以我添加了以下内容:

var svgImages = document.getElementsByTagName('image');
console.log(svgImages);

Chrome 和 FF 按预期返回了我文档中的 4 个 SVG 图像

然而，Internet Explorer 不仅添加了 svg 中的“image”标签，还添加了文档中其他位置的“img”标签

这表明 IE 要么故意这样做，要么无法区分“image”和“img”

Answer 1

这是 Kaiido 建议的示例。 我知道这很糟糕，但我找不到 IE 和 Edge 的任何其他选项。

var url = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
var svg = document.getElementById('svg');
var img = document.createElementNS("http://www.w3.org/2000/svg", 'image');

var dummy = new Image();
dummy.addEventListener('load', function()
{
  console.log("dummy onload");
  img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", url);
  img.setAttribute("width", dummy.width);
  img.setAttribute("height", dummy.height);
  svg.appendChild(img);
}, false);
dummy.src = url;

<svg id="svg" width="1000px" height="500px" />