Question

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

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

但是，只要地图中包含的div地图的display属性为无（见Google Maps Display:None Problem），Google地图就会无法正常工作。由于此函数在实际加载页面之前执行，因此包含div的{{1}}属性自然为无。

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

div

但是，由于对话框已经加载，因此当地图出现时会出现恼人的，明显的闪烁。

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

可能的解决方案：

在加载对话框之前，使包含地图的

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

具有块div属性。如果我没有使用jQuery Mobile，那么在需要之前隐藏地图的同时实现此效果将简单而轻松：

display

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

明确告知Google Maps API包含地图的

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

的大小。我用Google搜索了这个选项并没有运气，但考虑到我糟糕的谷歌搜索技巧，如果真的有可能，我不会感到完全惊讶。

其他 - 我对如何摆脱闪烁效应的任何想法持开放态度。以上只是一些可能的解决方案。

Answer 1

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

你可以尝试一下。只需使用attr（）隐藏元素，并在执行promise（）时使用attr（）显示它。并且您应该不使用显示属性。

参考 - Promise