Question

I have been having a problem lately with my JavaScript CODE and taking a portion of my code out of my $(document).ready() and putting it within $(window).load() fixed the problem.

Now I understand that window.load is fired just after document.ready, but why is it not ready after document.ready, that is after window.load()?

Answer 1

load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.

From the MDC, window.onload:

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.

From the jQuery API documentation, .ready( handler ):

While JavaScript provides the load
event for executing code when a page
is rendered, this event does not get
triggered until all assets such as
images have been completely received.
In most cases, the script can be run
as soon as the DOM hierarchy has been
fully constructed. The handler passed
to .ready() is guaranteed to be
executed after the DOM is ready, so
this is usually the best place to
attach all other event handlers and
run other jQuery code. When using
scripts that rely on the value of CSS
style properties, it’s important to
reference external stylesheets or
embed style elements before
referencing the scripts.