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

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
        });
    }
}