2

我正在开发一个网站，用户将在对话框中选择 OpenLayers 地图上的一个点（使用 jQuery UI 显示），然后根据地图上选择的点在页面的其余部分执行某些操作。用户还可以随时调用对话框来选择新点。

我的地图对话框和经纬度的回传工作得很好，但我的问题是页面加载优化。我最初的所有地图代码都在我的$(document).ready()函数中，而我的 OpenLayers.js 调用就在<head>页面的右侧。为了稍微改进一下，我将地图代码移到了它自己的 .js 文件中，并将链接（<script>标签）放在了两者的最底部<body>标签。它似乎稍微好一点，虽然我确实注意到地图的导航元素（缩放控件等）在屏幕上短暂闪烁，但我认为在样式表告诉它们隐藏之前。有什么办法可以强制地图仅在即将显示对话框时加载，因为我觉得稍微延迟会比主界面加载延迟更理想（可能很微妙）？也许更重要的是，走这条路有意义吗？对我来说，这听起来会是一种更好的做事方式，但我也愿意接受其他意见。

4

1 回答 1

2

您既可以加载 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-10T09:17:32.173 回答