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

Question

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

我正在使用 jQuery 工具库为我的用户创建一个“向导”，如下所述：http://flowplayer.org/tools/demos/tabs/wizard.html

向导的其中一个窗格具有嵌入式 Google 地图。地图有OP中提到的问题。

为了防止向导的所有窗格在 jQuery 工具脚本隐藏之前一直可见，我为窗格指定了 CSS 属性“display: none”（第一个窗格除外）。这是问题的根本原因 - 在 CSS 中注释掉该行会导致窗格暂时可见，并且嵌入的 Google 地图工作正常。

我的问题很简单：如何在正确的 jQuery/Javascript 中呈现以下伪 jQuery 代码？

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

另外，每次用户切换到带有地图的窗格时，我是否需要它运行，或者只是第一次？

编辑：

Gah... 我刚刚发现用于我的 CMS 的 Google Maps 插件会自动将脚本插入到页面中，该页面远高于我手动（事实证明是冗余）指定脚本的位置。所以，我无法控制何时调用脚本和渲染地图。

所以，我能想到的唯一选择是让地图的容器远离屏幕，然后在调用选项卡时将其恢复到原位。可能是这样的？：

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