在顯示jQuery Mobile頁面之前正確加載Google地圖

Question

問題：
我在jQuery Mobile文檔中有一個對話框頁面，其中包含一個小的Google地圖以顯示位置。 我想在加載對話框頁面之前先加載地圖。 如：

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

但是，每當包含該地圖的div的display屬性為none時， Google Maps便無法正常工作（請參閱Google Maps Display：None Problem ）。 並且由於此函數是在實際加載頁面之前執行的，因此包含div的display屬性自然為none。

現在，顯然，有一個簡單的解決方案。 我需要做的就是在顯示頁面后初始化地圖，這使div具有block的display屬性：

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

但是，由於對話框已經加載，因此在顯示地圖時會出現令人討厭的，明顯的閃爍。

題：
如何擺脫所描述的閃爍？

可能的解決方案：

在加載對話框之前，使包含地圖的div具有block的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.
 });

您可以嘗試一下。 只需使用attr（）隱藏該元素，並在執行promise（）。done時使用attr（）進行顯示即可：)而且，您不應使用display屬性。

參考- 承諾