如何在某些JS触发之前等待<object>中的SVG完成加载？

Question

我的html中有这个（SVG约为500K）：

<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>

我正在GitHub上使用脚本为SVG创建视口，以便可以在视口内平移和缩放，但与GoogleMaps一样。

https://github.com/ariutta/svg-pan-zoom

因此，加载顺序必须为：

1. svg-pan-zoom.js完成
2. 全部500k的svg需要完成加载

3. 需要运行以下代码：

   var panZoomArm = svgPanZoom('#arm');

不幸的是，以上代码在SVG未完全加载时运行，从而导致错误。

我已经尝试过了，但是.load似乎不是为它而设计的<object>-实际上debugger从未触发过

$('#arm').load(function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});

这些方法让我告诉代码仅在完全下载500k svg之后才能运行吗？

对于我而言，可靠地触发此代码的唯一方法是使SVG完全内联...因此，这就像几百行代码一样，无法缓存。

编辑 - -

好的，我可以使用它，但是我很困惑。

这不起作用（调试器从不触发）：

$('#arm').load(function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});

这有效：

var arm = document.getElementById("arm");
arm.addEventListener('load', function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});

Answer 1

这就是我让它工作的方式：

<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>

var arm = document.getElementById("arm");
arm.addEventListener('load', function(){
    var panZoomArm = svgPanZoom('#arm');
});