$(document).ready(function(){...}) vs $(function() {...}) -- What's the diff?

What is the difference anyway? Why use one over the other?

Posted by on May 21, 2013

I’ve been exposed to the “new” way of doing the common jquery statement:

We all have done or do this: $(document).ready(function {…} );

The “new” way $(function(){…});

So what’s the difference!?

After a little research, this is what I’ve found:

Essentially there is no difference between the two statement. The latter is just a shortcut for the first. To me, the first is a little more intuitive. When passing an anonymous function to jQuery, it will wait for the document to be ready anyway. So, both statements are...

functionally equivalent.

While researching this difference, I found something more interesting though:

Using either of these statements could be slowing down the perceived page load time. It’s understandable why we feel we need to wait for the document to be finished loading before we start javascript interaction/DOM manipulation, but this isn’t always the case. Sometimes attaching event handlers, or making an asynchronous ajax calls as the DOM is loading can be faster overall. This doesn’t mean there aren’t scenarios where waiting for the DOM to be fully loaded is necessary.

Read and consider this article: http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

Hope you find value in this!

← Return