121

I saw this question in stackoverflow but do not feel that it was answered at all.

Is $(document).ready necessary?

I link all my javascripts at the bottom of the page so in theory they are all running after the document is ready anyways.

Dan Kreiger
  • 5,358
  • 2
  • 23
  • 27
Joshua Robison
  • 1,868
  • 4
  • 20
  • 24
  • 3
    Older browsers may not enjoy the parallel downloading that newer browsers employ. That is the main reasoning your scripts are placed at the bottom. It specifically allows your HTML and CSS to be rendered first on older browsers. At this point, you have a choice to make on how you want to accomplish sensing that the DOM is loaded. Two popular methods for kicking off your js are window.onload & $(document).ready (in conjunction with jQuery). There are other options & easily searched, obvious downsides to window.onload. The point is $(document).ready works more often than not & is easy to use. – BradChesney79 Oct 29 '14 at 15:43

5 Answers5

136

Is $(document).ready necessary?

no

if you've placed all your scripts right before the </body> closing tag, you've done the exact same thing.

Additionally, if the script doesn't need to access the DOM, it won't matter where it's loaded beyond possible dependencies on other scripts.

For many CMS's, you don't have much choice of where the scripts get loaded, so it's good form for modular code to use the document.ready event. Do you really want to go back and debug old code if you reuse it elsewhere?

off-topic:

As a side note: you should use jQuery(function($){...}); instead of $(document).ready(function(){...}); as it forces the alias to $.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • Are you sure that its the "exact same thing"? I was under the impression that your css (or other code loaded in parallel with the main html) may not yet be fully parsed. – Zach Lysobey Apr 01 '13 at 21:47
  • 7
    @ZachL, the document may be ready before CSS is fully parsed. `document.ready` **is not the same** as the `onload` event, where images and other external assets have finished loading. – zzzzBov Apr 01 '13 at 21:56
  • 5
    This "no" just cost me 3 hours of work.. just make sure u dont mistake

    with

    :)     – teejay Mar 09 '14 at 13:15
  • 1
    I don't necessarily agree with forcing the alias though, especially if `noConflict()` needs to be used for some reason. – Jay Blanchard Sep 05 '14 at 13:20
  • @JayBlanchard, The alias is forced to `$` within the callback where it would make sense for `$` to refer to jQuery. You may, of course, change the alias to whatever you'd prefer to use. – zzzzBov Sep 05 '14 at 14:53
  • 1
    For the equivalent of `onload`, use `$(window).load()`. – thdoan Feb 02 '16 at 03:41
26

No, if your javascript is the last thing before close you won't need to add those tags.

As a side note, a shorthand for $(document).ready is the code below.

$(function() {
// do something on document ready
});

This question might be good. Did you read it? jQuery: Why use document.ready if external JS at bottom of page?

Community
  • 1
  • 1
turtlepick
  • 2,694
  • 23
  • 22
  • 6
    The question is essentially "Do I need document ready at all when I put my scripts at the bottom of the body?", not "Is there a shortcut way of writing `$(document).ready()`". – nnnnnn Jun 14 '13 at 09:58
4

No, it isn't necessary provided you know you do not have any deferred stuff happening-- and in most cases you will know if you have developed what you are working on from top to bottom.

--It is when you bring in someone else's code, without thoroughly auditing it, that you don't know.

So, ask yourself are you using a framework or editor that helps you with the structure? Are you bringing in someone else's code and you haven't bothered to read through each file? Are you prepared to go through the Operating System, Browser, and Browser Version matrix of testing your code? Do you need to squeeze every single ounce of speed from your code?

document.ready() makes many of those question become irrelevant. document.ready() was designed to make your life easier. It comes at a small (and I dare say acceptable) performance hit.

BradChesney79
  • 650
  • 7
  • 16
  • Just something I saw - one of your edits got rejected, but it looks fine to me. You might want to resubmit that one: http://stackoverflow.com/review/suggested-edits/3224385 – Qantas 94 Heavy Oct 27 '13 at 11:32
1

I have seen references/blog post across the internet regarding the usage of jquery's document.ready. In my opinion both using it or putting all your javascript at the bottom of the page are both valid. And now the question would be which would be better? It is just a matter of programming style.

Krishna Chytanya
  • 1,398
  • 1
  • 8
  • 12
0

No, it is not necessary. You can either put the script tag right before the body closing tag or if you are supporting IE9+ you can use native JS. 

<script>alert('DOM Loaded!');</script>
</body>

<script>
document.addEventListener("DOMContentLoaded", function(event) { 
      // DOM has loaded ready to fire JS scripts
    });
</script>
mbokil
  • 3,202
  • 30
  • 22