Question

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

我已经得到了地图对话框和lat / long工作的回传就好了，但我的问题是页面加载优化。我最初的所有地图代码都在我的$(document).ready()函数中，我的OpenLayers.js调用正好在页面的<head>中。为了尝试改进一下，我将地图代码移动到自己的.js文件中，并将链接（<script>标记）放在<body>标记的最底部。虽然我注意到地图的导航元素（缩放控件等）在屏幕上短暂闪现，但我认为在样式表告诉他们隐藏之前，它似乎稍好一些。是否有任何方法可以强制地图仅在对话框即将显示时加载，因为我觉得稍微延迟会比主界面加载的延迟（这可能是微妙的）更理想？也许更重要的是，沿着那条路走下去是否有意义？对我而言，这听起来似乎是一种更好的做事方式，但我也对那里的其他意见持开放态度。

Answer 1

您既可以加载OpenLayers.js库，也可以在对话框的open事件中创建map。这样页面加载速度会更快，如果用户从不打开对话框，你将跳过加载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.
  }
});

对话框显示上的Lazy Load OpenLayers Map？

1 个答案: