Question

我正在向浏览器动态发送html代码段。此代码段包含SVG和一段Javascript：

<div class="traffic-map-wrap">
    <embed id="traffic-map" type="image/svg+xml" class="traffic-map" src="{traffic-map-svg}" />
</div>

<script>
  $(function() {
    svgPanZoom('#traffic-map', {
      zoomEnabled: true,
      controlIconsEnabled: false,
      minZoom: 0.1,
      maxZoom: 10000
    });
  });
</script>

代码段中的函数运行正常，但svgPanZoom失败，因为它是在SVG完全加载（TypeError: e.getSVGDocument(...) is null）之前运行的。另一方面，如果我在点击之前引入alert()并给它几秒钟，那么一切正常：

<script>
  $(function() {
    alert();
    svgPanZoom('#traffic-map', {
      zoomEnabled: true,
      controlIconsEnabled: false,
      minZoom: 0.1,
      maxZoom: 10000
    });
  });
</script>

显然这不是一个光荣的解决方案，所以如何在加载完所有内容后运行动态加载的脚本？一些等价的$(window).load(function(){...});？

Answer 1

如果加载了SVG，请尝试递归检查...

$(function() {
    svgPanZoom_launcher();
});

function svgPanZoom_launcher() {
    var svg = document.getElementById("traffic-map").getSVGDocument();
    if (svg == null) {
        setTimeout("svgPanZoom_launcher()", 400);
    } else {
        svgPanZoom('#traffic-map', {
            zoomEnabled: true,
            controlIconsEnabled: false,
            minZoom: 0.1,
            maxZoom: 10000
        });
    }
}

在动态加载的内容完成加载后运行动态加载的jQuery

1 个答案: