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完全内联......这样就像数百行代码一样无法缓存。

EDIT ----

好的，我得到了它的工作，但我很困惑。

这不起作用（调试器永远不会触发）：

$('#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

而不是load，使用find更好地检查SVG元素是否已完成加载

所以我建议先检查元素是否准备就绪。否则setTimeout

 function checkReady() {

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

  }

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

3 个答案: