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

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

所以加载顺序需要是：

svg-pan-zoom.js 完成
所有 500k 的 svg 需要完成加载
需要运行以下代码：

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

在这些情况下，您可以设置一个 interval 每定义的秒数运行一次。然后 在调试器运行时清除 或 var panZoomArm 使用以下代码获取值：

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

希望对您有所帮助！

Answer 2

我是这样工作的：

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

最好使用 find rather than load 检查 SVG 元素是否已完成加载。

首先检查以确定元素是否准备就绪。如果不是，请使用 setTimeout:

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

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

How to wait for an SVG inside <object> to finish loading before some JS fires?

javascript

jquery

svg