what exactly document-ready means in jquery

Question

Let us say I have a HTML page that contains a javascript file:

The base.js is like this:

$(document).ready(function () {
   obj.init();
}

// .....         


        

Answer 1

From the documentation of jQuery.ready():

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.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

Answer 2

The ready event happens when the document is loaded and parsed.

This includes all Javascript files, but not images.

The ready event happens after the document is parsed. Some browsers have a specific event for this, in other browsers jQuery uses a timer that polls the status of the document. This means that the event happens either as soon as the entire document is parsed, or slightly later, depending on the browser. This is normally not a problem, as it doesn't happen before anything of the document is parsed.

If you need all images to be loaded before you do something, you should use the load event instead.

Answer 3

You should define obj before referencing it.

Also, document.ready doesn't mean that the resources will be loaded, only that the document been parsed, so the resources load between document ready and the $(window).load event.