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

Posted 2023-05-08

【中文标题】在显示 jQuery Mobile 页面之前让 Google 地图正确加载

【英文标题】：Getting Google map to properly load before jQuery Mobile page is shown

【发布时间】：2012-07-20 20:40:04

【问题描述】：

问题： 我在 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 的大小。我用谷歌搜索了这个选项，但没有运气，但考虑到我糟糕的谷歌搜索技能，如果这真的可行，我不会完全感到惊讶。 其他 - 我愿意接受有关如何消除闪烁效果的任何想法。以上只是一些可能的解决方案。

【参考方案1】：

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

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

参考 - Promise

【讨论】：

我不确定我将如何使用它或者它是否可以工作。如果我把它放在pagebeforeshow 事件中，对话框页面上不会有排队的操作，因此会立即执行。如果我把它放在pageshow 事件中，页面将已经加载，因此闪烁效果会很明显。