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

Question

我已经在我的html中找到了这个( SVG大约是500 K)：

<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. 所有500 k的svg都需要完成加载
3. 需要运行以下代码： var panZoomArm = svgPanZoom('#arm');

不幸的是，当SVG没有完全加载时，上面的代码就会运行，从而导致错误。

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

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

这些方法让我告诉代码只在500 k 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');
});

Answer 2

在这些情况下，您可以设置一个interval，它每隔一秒钟运行一次。然后，当调试器运行或var panZoomArm使用以下代码获得一个值时，清除它：

if (typeof panZoomArm !== 'undefined') {
    // the variable is defined
    clearInterval(yourInterval);
}

希望它能帮到你！

Answer 3

最好使用find而不是load来检查SVG元素是否已完成加载。

检查以确定元素是否已就绪。如果没有，请使用setTimeout

 function checkReady() {
    
    if (!$('#arm').find('svg')[0]) {
        setTimeout(function(){checkReady();}, 300);
    } else { 
        debugger
        var panZoomArm = svgPanZoom('#arm');   
    }
    
  }