在对话框显示上延迟加载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地图？

回答

相关问题