Let me get this straight. According to best practice we should initialize jQuery at the bottom of the page. If we do that, any reference to the jQuery object (ie. $ or jQuery) above the reference will be a null. However, as for $(document).ready(), the reason why this jQuery function is ever needed is when you want to delay an execution of a function after the page has loaded. This seems to be a conflict.
How do I use the functionality of $(document).ready() at the top of the page and still reference jQuery at the bottom of the page? I think jQuery should be initialized at the top of the page for this very reason.
Let me get this straight. According to best practice we should initialize jQuery at the bottom of the page. If we do that, any reference to the jQuery object (ie. $ or jQuery) above the reference will be a null. However, as for $(document).ready(), the reason why this jQuery function is ever needed is when you want to delay an execution of a function after the page has loaded. This seems to be a conflict.
How do I use the functionality of $(document).ready() at the top of the page and still reference jQuery at the bottom of the page? I think jQuery should be initialized at the top of the page for this very reason.
- You're right. You have to put your initial jQuery reference before you use $, so if you use $ at the top of the page, that's where you have to reference the library. – willoller Commented Nov 5, 2010 at 16:49
- Yes - the efficiency advice is actually to have all javascript at the bottom of the page. You can still have the jQuery initialization as the top part of this javascript, and use $(function() {...}); AFTER that – Bobby Jack Commented Nov 5, 2010 at 16:51
- The thing that annoys me is Telerik MVC's framework needs to reference its javascript and it's dependent frameworks (ie: jquery) at the bottom of the page for their controls to work properly. I've decided to use window.onload() for now. – burnt1ce Commented Nov 5, 2010 at 17:10
- I hear you burnt1ce, but I'm suggesting: "<html><head>...</head><body>...<script src="jquery.js"></script><script>/* your script / $(function() { ... / your code here */ });</script></body></html>" Apologies for the terrible formatting that these ments restrict me to! – Bobby Jack Commented Nov 8, 2010 at 10:16
- possible duplicate of jquery - Is $(document).ready necessary? – zzzzBov Commented Oct 17, 2013 at 23:00
2 Answers
Reset to default 3If you're going to put your scripts at the bottom of the page for efficiency purposes, and there are no further elements (beyond </body> and </html>) you wont even need to use $(document).ready(...);.
Placing your code at the top of the page makes sense semantically, and the loading time "savings" is negligible in most cases. It really only makes a difference when the scripts are enormous, or when the scripts are on another server that may or may not be active.
If you're live-linking jQuery, i'd suggest putting it at the bottom of the page. If you're local-linking jQuery, the top should be fine. Just make sure to use minimized code.
Just put $(document).ready below where you initialize jQuery regardless of where that is.
In reality though you should be putting all your JS at the bottom, even $(document).ready.