19

If I'm loading my jQuery scripts below all of my page HTML, do I still need to wait for $(document).ready to be able to use jQuery to find elements in the page?

Kevin Burke
  • 61,194
  • 76
  • 188
  • 305
  • 1
    "Technically", yes -- "practically", no. This has been consistent (non-defined) behavior for browsers for years. However, I believe there might be some magic with `ready` and frames in IE... the script should still be *inside* the body tag. –  May 01 '12 at 02:33
  • Also, does "footer" mean `
    ` or at the end of `` or ...?
     –  May 01 '12 at 04:02
  • 1
    possible duplicate of [jquery - Is $(document).ready necessary?](http://stackoverflow.com/questions/4643990/jquery-is-document-ready-necessary) – Ciro Santilli OurBigBook.com Feb 06 '14 at 17:18

3 Answers3

6

No because the document would have already been loaded. The Dom loads top to bottom. I personally like to put all my js at the bottom of the page instead of in the head.

however it is only 1 line of code and i would suggest using it just to be safe. also you can make it even shorter. $(function() {} is the same as $(document).ready(function(){})

Yamiko
  • 5,303
  • 5
  • 30
  • 52
  • 1
    I don't understand why you should use it just to be safe; it sounds like it would unnecessarily slow down execution. – Kevin Burke May 08 '12 at 06:01
  • because there will always be someone with some browser configuration that will fail if it doesn't see what it wants or expects. running `$(function() {}` once doesn't slow things down enough for you to care. look at http://stackoverflow.com/questions/8160014/document-ready-check-slows-down-ie and read the comments for the accepted answer. using `$(function() {}` is going to take around 2-3ms on average. on a side note if you use php you can make a function or class to put all js in 1 file in 1 `$(function() {}` or you can do it in js to. look into programing design patterns. – Yamiko May 08 '12 at 23:13
5

No you do not need $(document).ready for any code that interacts with DOM elements on the page if the scripts are placed below these elements.

It's good practice to put them before the closing </body> tag.

luke2012
  • 1,724
  • 1
  • 13
  • 20
  • The HTML tag only has two valid children, head and body, so I would probably say it is more than good practice to put your script tags within the closing body tag. Parsers can be weird with invalid HTML – Hazza Dec 06 '17 at 11:00
1

You do not need to use jQuery's ready function, but your code would have to be written with this in mind. Any click or other bind-based handlers may not attach to selectors correctly, however, others like live and $.ajax may function as intended.

Be careful when using script loaders or AMD using this approach. jQuery must be available and you must block when loading. Load jQuery and other deps in the head.

A great look at this technique which describes that this is not necessary to use for jQuery to function (not necessarily about the use in footer):

http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

philwinkle
  • 7,036
  • 3
  • 27
  • 46
  • (That link talks about using scripts in a HEAD-position, but not a FOOT-position.) –  May 01 '12 at 02:40
  • It would work for anything available in the DOM prior to execution. Anything loaded afterward, via any means, such as ajax or added in a subsequent document change would not be picked up by jQuery's `click` – philwinkle May 01 '12 at 02:41
  • But how would `ready` fix that (over a FOOT-position script)? –  May 01 '12 at 02:41
  • In those examples they're using `live` and `ajax`, not DOM dependent. I will update the article. – philwinkle May 01 '12 at 02:41
  • @pst `ready` is an event that tells the browser to not run the script until after the dom has loaded. so if it is in the head it will not run until the rest of the body has been loaded. – Yamiko May 01 '12 at 02:57
  • @yamikoWebs Yes, but this question specifically deals with FOOT-position (after-everything) scripts. I am not sure if it's explicitly asking about `
    `-located scripts, but the same applies: the DOM has had the opportunity to be fully-created at this time (insofar as it has been read in). *All* the modern browsers I know of will ensure this serialized order and DOM visibility, even though I am not sure it is "well defined" according to a W3C publication/draft.
     –  May 01 '12 at 03:59