title: Lazy Load OpenLayers Map on Dialog Display?
body: <p>I'm developing a site where the user will choose a point on an OpenLayers map in a dialog box (displayed using jQuery UI) which will then do something on the rest of the page based on the point chosen on the map. The user can also call up the dialog at any time to pick a new point.</p>
  
  <p>I've got the map dialog and passback of lat/long working just fine, but my question comes to page load optimization. I originally had all of my map code right in my <code>$(document).ready()</code> function with my OpenLayers.js call right in the <code>&lt;head&gt;</code> of the page. To try and improve things a bit, I moved the map code into its own .js file and put the links (<code>&lt;script&gt;</code> tags) to both at the very bottom of the <code>&lt;body&gt;</code> tag. It seems slightly better, though I do notice the navigational elements for the map (zoom controls and such) flash briefly on the screen, I presume before the stylesheet tells them to hide. Is there any way I could force the map to only load when the dialog is about to be displayed, as I feel that a slightly delay there would be more ideal than a delay in the main interface loading (subtle as that might be)? And perhaps more importantly, would it make sense to go down that road? To me, it sounds like it would be a slightly better way of doing things, but I'm open to other opinions there as well.</p>