2

ユーザーがダイアログ ボックス (jQuery UI を使用して表示) で OpenLayers マップ上のポイントを選択し、マップ上で選択したポイントに基づいてページの残りの部分で何かを行うサイトを開発しています。ユーザーは、いつでもダイアログを呼び出して、新しいポイントを選択することもできます。

マップ ダイアログと緯度/経度のパスバックは正常に機能していますが、ページの読み込みの最適化について質問があります。私は元々、すべてのマップ コードを$(document).ready()関数内に配置し、OpenLayers.js 呼び出しを<head>ページ内に配置していました。少し改善するために、マップ コードを独自の .js ファイルに移動し、両方へのリンク (<script>タグ) を両方のファイルの一番下に配置しました。<body>鬼ごっこ。スタイルシートがそれらを非表示にするように指示する前に、地図のナビゲーション要素（ズームコントロールなど）が画面上で短時間点滅することに気づきましたが、少し良くなったようです. ダイアログが表示されようとしているときにのみマップをロードするように強制する方法はありますか? そしておそらくもっと重要なことは、その道をたどることは理にかなっているでしょうか? 私には、物事を行うには少し良い方法のように思えますが、他の意見も受け入れます.

4

1 に答える 1

2

OpenLayers.js ライブラリをロードし、ダイアログの open イベントでマップを作成することができます。そうすれば、ページの読み込みが速くなり、ユーザーがダイアログを開かない場合は 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-10T09:17:32.173 に答える