What event does JQuery $function() fire on?

Question

We have a JQuery $(function() statement as:

<script type="text/javascript">
$(function(){
  //Code..
})
</script>

Dumb question - when exactly is this function executed? Is it when the entire HTML page has been downloaded by the client?

What is benefit of using the wrapping your code within $(function() as opposed to just doing:

<script type="text/javascript">
//Code..
</script>

Answer 1

It fires when the document has been parsed and is ready, and is the equivalent of $(document).ready(function () { }) .

The obvious benefit is that having your script tag before other elements on the page means that your script can interact with them even though they're not available at parse time. If you run your script before elements have been parsed and the document is not ready, they will not be available for interaction.

Answer 2

It is executed as soon as the DOM is parsed and is invoked in order of appearance if there are multiple appearances. At this point the document is however not displayed, its just parsed.

Answer 3

When the document completes loading. It is the same as writing this:

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

EDIT: To answer your second question:

If you don't wrap your code in the block above then it would fire as soon as it is encountered instead of after all the controls on the page have loaded. So if a block was at the top of a page and it referred to elements in the page those references would not work as the elements have not loaded yet.

But if you wrap in the block then you know that the page has loaded and all elements are available to now reference.

Answer 4

It fires after the the document has fully loaded, the DOM tree has been initialized, all CSS styles have been applied and all Javascript has been executed. It differs from the load event in that elements (other than CSS/JS) that load their content from other URLs, such as images or flash files, have not necessarily finished loading at this point. This is usually called the "domready" or "domloaded" event, and some modern browsers support it directly (eg Firefox has a DomContentLoaded event), and on others it can be simulated with various tricks, like using the defer attribute or placing a script at the very end of the body.

The advantage is that you can reliably interact with the document at this time; for example you can set an event handler on an element with a certain ID and be sure that it already exists in the DOM tree. On the other hand, it can run considerably earlier than the load event, if some external resource is slow to load. If your script is at the end of your HTML code, then there might be little difference in using or not using the domready event, but usually scripts are called from the head tag, and at that point no elements of the body are available yet.