在显示 jQuery Mobile 页面之前让 Google 地图正确加载

Question

问题：
我在 jQuery Mobile 文档中有一个对话框页面，其中包含一个用于显示位置的小型 Google 地图。我想在加载对话框页面之前加载地图。如：

$("#dialogPage").bind("pagebeforeshow", function() {
    initializeSmallMap();
});

但是，只要包含地图的div 的display 属性为none，Google 地图就会无法正常工作（请参阅Google Maps Display:None Problem）。而且由于这个函数是在页面实际加载之前执行的，所以包含div的display属性自然为none。

现在，显然有一个简单的解决方案。我需要做的就是在页面显示后初始化地图，这使得div 具有块的显示属性：

$("#dialogPage").bind("pageshow", function() {
    initializeSmallMap();
});

但是，由于对话框已经加载，地图出现时会出现令人讨厌的明显闪烁。

问题：
如何消除所描述的闪烁？

可能的解决方案：

在加载对话框之前使包含地图的div 具有块的display 属性。如果我没有使用 jQuery Mobile，那么实现这个效果会很简单，而且在需要时仍然隐藏地图：

position: absolute;
left: -10000px;
display: block;

但是，由于 jQuery Mobile 会自动覆盖页面样式，我不知道如何让它工作。

明确告诉 Google Maps API 包含地图的 div 的大小。我用谷歌搜索了这个选项，但没有运气，但考虑到我糟糕的谷歌搜索技能，如果这真的可行，我不会完全感到惊讶。

其他 - 我愿意接受有关如何消除闪烁效果的任何想法。以上只是一些可能的解决方案。

Answer 1

 $("#dialogPage").promise().done(function() {
   //Code to execute when map is loaded.
 });

你可以试试。只需在执行 promise().done 时使用 attr() 隐藏元素并使用 attr() 显示它:) 而且你应该不使用显示属性。

参考 - Promise