2

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

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

但是，只要包含div的地图具有displaynone 属性，Google Maps 就会无法正常工作（请参阅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 APIdiv包含地图的大小。我用谷歌搜索了这个选项，但没有运气，但考虑到我糟糕的谷歌搜索技能，如果这真的可行，我不会完全感到惊讶。
  • 其他 - 我对如何消除闪烁效果的任何想法持开放态度。以上只是一些可能的解决方案。

    • 4

    1 回答 1

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

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

    参考 -承诺

    于 2012-07-22T07:47:25.130 回答