jquery - 元素的 CSS 属性更改后调用外部 .js 文件

Question

我遇到了同样的问题 here, with an embedded Google Map being offset ，并且不是很精通 Javascript，我不知道如何以理想的方式解决这个问题。

我正在使用 jQuery 工具库为我的用户制作各种“向导”，如下所述:http://flowplayer.org/tools/demos/tabs/wizard.html

向导的其中一个 Pane 具有嵌入式 Google map 。该 map 存在 OP 中提到的问题。

为了防止向导的所有面板闪烁，直到 jQuery 工具脚本隐藏它们，我为这些面板赋予了 CSS 属性“display: none”(第一个面板除外)。这是问题的根本原因 - 在 CSS 中注释掉该行会导致 Pane 暂时可见，并且嵌入式 Google map 可以正常工作。

我的问题很简单:如何在适当的 jQuery/Javascript 中呈现以下伪 jQuery 代码？

when (.pane.hasMap).css("display") == "block"
{
    load/run external google-maps.js file
}

此外，我是否需要在每次用户切换到带有 map 的 Pane 时运行它，还是仅在第一次时运行？

编辑:

啊……我刚刚发现我的 CMS 的 Google map 插件会自动将脚本插入页面，远高于我手动(结果是多余的)指定脚本的位置。因此，我无法控制何时调用脚本和渲染 map 。

因此，我能想到的唯一替代方法是将 map 的容器放置在屏幕外，然后在调用选项卡时将其恢复到位。也许是这样的？:

if ( $(".pane.hasMap").is(':visible') ) {
    $(".mapContainer").css("top", "0", "left", "0");
}

Answer 1

如果某物可见则做某事:

if ( $(".pane.hasMap").is(':visible') ) {
    $.getScript("https://apis.google.com/js/google-maps.js", function () {
          //execute maps here;
    });
}

如果您使用 jQuery 来显示隐藏的元素，最好在使这些元素可见的同时获取脚本，如下所示:

$(".pane.hasMap").show('slow', function() {
    $.getScript("https://apis.google.com/js/google-maps.js", function () {
          //execute maps here;
    });
});