jquery - 在动态加载的内容完成加载后运行动态加载的 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之前运行而失败。另一方面，如果我在点击前引入 an 并给它几秒钟，一切正常：SVGTypeError: e.getSVGDocument(...) is nullalert()

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