Question

My landing page contains a big google maps portion, which slows down the loading time. I am trying to do the following:

1. Load the static elements first so the page loads fast initially.
2. Display a loading notification in the map placeholder so that the user knows that the map is coming up
3. Load and display the map

I have done this:

$(document).ready(function() {
  map_initialize();
}

The map_initialize() function loads the map into its container div. However, this still will not display the static elements fist. The page will wait until the map_initialize() is finished, then load the static elements at the same time as the map.

Answer 1

The window.onload event will wait for the images, and any other resource on the document, to load before it gets fired:

The load event fires at the end of the
document loading process. At this
point, all of the objects in the
document are in the DOM, and all the
images and sub-frames have finished
loading.

Source: Mozilla Dev Center: window.onload

You may also want to check out the following Stack Overflow post for further reading:

• Execute JavaScript When Page Has Fully Loaded

Therefore all you need to do is to set the window.onload event handler as follows:

window.onload = map_initialize;