Do I still need $(document).ready(function(){ })?

Question

I've been developing in javascript for a few months and I have been using $(document).ready(function(){ at the beginning of all my scripts. I've noticed other folks don't use this in their scripts but I can't seem to get mine working without it. I'd like to keep my code cleaner, but for all my google searches I can't seem to figure out how to get rid of it.

I know it tells the browser to execute my script as soon as the page loads but is there something global I can set so that I don't need to explicitly tell the browser to execute each of my scripts when the page loads? Or is it a more global problem with where in my html files the scripts are located?

Stick your script tags right before `
` and you shouldn't need document ready — Andrew Whitaker, Apr 24 '12 at 21:12

score 7 · Accepted Answer · answered Apr 24 '12 at 21:12

7

You're needing document.ready probably because you're interacting with the DOM before it loads. How can the script manipulate elements that are not there yet?

If you stick your script at the end of the file you will not need it. It's also good practice to do so for a lot of Javascript files as they can take time to process (especially if they're hosted externally). Putting them at the end of the file often speeds up the page load time.

answered Apr 24 '12 at 21:12

Aidanc

6,921
1
26
30

1

The practice of putting the JavaScript at the end -- which *reliably works* in all browsers that *I* know about -- is technically *not* guaranteed. At this point, however, as it would be suicide for a browser to *not* work this way, it comes down to an argument of theoretical virtues and not [necessarily] practical application... – Apr 24 '12 at 21:37
@pst this are some [side effects](http://stackoverflow.com/questions/8717401/is-onload-necessary-when-javascript-is-at-the-bottom) that even exist even on updated browsers – ajax333221 Apr 24 '12 at 21:52
@ajax333221 That answer has replies that ... are lacking. Neither ` – Apr 24 '12 at 22:05

Code Maverick · Answer 2 · 2012-04-24T21:50:47.103

6

All $(document).ready(function() { ... }); or $(function() { ... }); does is wait for the document to be ready for manipulation. You should use $(document).ready(function() { ... }); or $(function() { ... }); if your scripts are inline or in the <head /> section because JavaScript executes in the order in which it appears on the page otherwise.

To do away with $(document).ready(function() { ... }); or $(function() { ... });, simply move your scripts down to the bottom of the page after all of your content, right before the closing </body> tag.

Putting the scripts at the bottom is really a best practice anyway. For this and other best practices, I recommend you take a look at Html5Boilerplate and Yahoo! Best Practices.

edited Apr 24 '12 at 21:50

answered Apr 24 '12 at 21:12

Code Maverick

20,171
12
62
114

`..., after all of your content has loaded. ..` That is not strictly true. Document.Ready fires as soon as the DOM is registered by the browser which does not mean all of your content is loaded. More often than not, images are not yet loaded when document.ready fires. – Nope Apr 24 '12 at 21:32
Another good practise is not to have any scripts inside your html at all but referencing a script file which contains the scripts for your page in it. Using unobtrusive scripts results in cleaner Html. – Nope Apr 24 '12 at 21:37
@FrançoisWahl - Right, that's true, I'll edit. As far as the 1 script file goes, that's true as well, and is discussed in the links I mentioned. Even still, you can wind up with about 2 or 3 external script files that pull from CDN (modernizr.js, jquery.js, jquery-ui.js) and then 2 script files locally (plugins.js and script.js). That's how I do it anyway. – Code Maverick Apr 24 '12 at 21:50
2

@Scott "right before the closing
" I have done it all this time wrong, omg I always place it after... :(
– ajax333221 Apr 24 '12 at 21:55

score 1 · Answer 3 · answered Apr 24 '12 at 21:14

1

the $(document).ready() convention is part of jQuery, not just JavaScript. From their' documentation on the ready function:

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

So yes, it is required. jQuery does come with a shorthand for this though, so you could do the following:

$(function() {
  //jquery code
};

answered Apr 24 '12 at 21:14

GSto

41,512
37
133
184

"not just JavaScript"? What do you mean? – Florian Margaine Apr 24 '12 at 21:22
@FlorianMargaine - the `$(document).ready()` function is provided by jQuery, and while jQuery itself is implemented in JavaScript you obviously can't use jQuery features on web pages that don't include the jQuery library. The nearest simple equivalent without jQuery that works in all browsers is a plain `onload` event handler. – nnnnnn Apr 24 '12 at 21:45
Yup, I know that, but @GSto's sentence makes it look like it's "not only javascript", which is why I'm still hesitating about whether I should downvote :p – Florian Margaine Apr 24 '12 at 21:55

Do I still need $(document).ready(function(){ })?

3 Answers3