在對話框顯示上延遲加載OpenLayers地圖？

我正在開發一個網站，用戶將在對話框（使用jQuery UI顯示）中選擇OpenLayers地圖上的一個點，然後根據地圖上選定的點對網頁的其餘部分執行一些操作。用戶也可以隨時調出對話框來選擇一個新點。在對話框顯示上延遲加載OpenLayers地圖？

我已經有地圖對話框和lat/long的回傳工作得很好，但我的問題是頁面加載優化。我原本在我的$(document).ready()函數中使用了我所有的地圖代碼，我的OpenLayers.js正好在頁面的<head>中調用。爲了嘗試和改進一點，我將地圖代碼移到了它自己的.js文件中，並將鏈接（<script>標籤）放在<body>標籤的最底部。雖然我注意到地圖的導航元素（縮放控件等）在屏幕上短暫閃爍，但在樣式表告訴他們隱藏之前，我認爲它稍微好一點。有什麼辦法可以強制地圖僅在對話框即將顯示時加載，因爲我覺得稍微延遲會比主界面加載中的延遲更理想（可能會有微妙的變化）？也許更重要的是，走這條路是否合理？對我而言，這聽起來像是一種稍微好一點的做事方式，但我也接受其他意見。

來源

2012-06-08 Devin

您既可以加載OpenLayers.js庫，也可以在對話框的打開事件中創建地圖。這樣頁面加載速度會更快，如果用戶永遠不會打開對話框，您將跳過加載OpenLayers.js。

var scriptAlreadyLoaded = false; 

$("#dialog").bind("dialogopen", function(event, ui) { 
    if(!scriptAlreadyLoaded){ 
    $.getScript("/scripts/OpenLayers.js", function() { 
     //Instantiate OpenLayers map when script is loaded 
     //... 
    }); 
    } 
    else{ 
    //It's second time user opens dialog so script is already loaded 
    //and map instantiated. 
    } 
});

來源

2012-06-10 09:17:32 igorti

謝謝，我用了一個小小的改動（只是把它放在我的按鈕的點擊事件中，以便我可以在等待時顯示一個「加載」對話框）。現在，如果只是它沒有這麼慢的地圖加載！雖然這是另一天的問題！ – Devin

很高興幫助你！考慮只使用您在應用程序中使用的功能來構建您自己的openlayers版本。通過這種方式，您可以大大減少openlayers庫的大小。這裏有一個指導如何做到這一點 - http://docs.openlayers.org/library/deploying.html – igorti

在對話框顯示上延遲加載OpenLayers地圖？

回答

相關問題