Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Lauri Hasko
3,367 PointsjQuery Basics - Right place to load jQuery?
Hello,
Some people say that it is wrong and lazy to load jQuery just before body element. They say you should load it in the head section.
Can you please tell little bit more about this thing and why this isn't standard where to do this thing? Thank you.
6 Answers
Calvin Nix
43,828 PointsIt is actually best practice to load jQuery at the very end of the body element. This way all of your images load before jQuery.
Here is the link to the video that discusses this best practice: Including jQuery
Chris Dziewa
17,781 PointsFrom what I have seen the best way to do this is by placing your js files before the body element (exception of Modernizr and prefix free). By placing them in that location, your entire DOM has been created by the time you first run a script. This is especially nice because it allows you to not have to worry about using $(document).ready() in your jquery application file.
Lauri Hasko
3,367 PointsHmm.. I would like to include jQuery in the head section. So this is not a good idea because "This way all of my images wont load before jQuery?" ... I would like to know the big story behind this not just that it is best paractise. (sorry my english).
Chris Dziewa
17,781 PointsIt's not that the images would load before jQuery. They would be inserted into the Document Object Model (DOM) which is like a tree with each branch having relationships to the other elements. For instance, a div with a paragraph tag inside would be viewed by the browser as a parent to child relationship. By allowing everything to load first you prevent jQuery from trying to perform an action on an element that has not yet been loaded into the DOM. Placing jQuery on the bottom acts the same as $(document).ready();" If you wanted to hide an image before the page is displayed, you can still do this when the DOM has been created. It doesn't have to do with the display to the user, just the browser's creation of the hierarchy of elements. I hope this clears things up for you.
Lauri Hasko
3,367 PointsOk, this clears things up a lot, thank you. But when you use things like MVC .. or framework like approach.. hmm.. it is not good thing that this jQuery "code" is before closing body tag.. it should be head section and in somekind of class. So for example administrator could find the code for jQuery, JavaScript, CSS and Modernizr from same place, from same file...
So how big difference are we talking about? And why it is so bad thing to use document ready function? The code should be in classes / objects way not hanking somewhere below.. ok maybe I mix up things.
Foundation for example says that you should call jQuery before closing body tag not in head section.. I'm just wondering .. Treehouse should explane this whole thing bit more, not so fast... thanks!
Chris Dziewa
17,781 PointsI wouldn't be able to tell you for sure the speed difference between the two. I'm sure it depends just how large your site or application is. I know that there are performance increases by including at the bottom of a dynamic site.
I have not yet done more than the little taste of MVC on the PHP course which isn't actually a framework but I've worked a little with Ruby on Rails. I think where you need to place the extra javascript files and other assets depends on the framework you are using, and if you were to work in a team, I would imagine that could affect the placement as well. There are conventions which you could find for any given framework by doing a quick google search. In Rails for example, all of the assets are actually kept in a folder named assets with sub-directories for css, javascript and images. Keep in mind that Bootstrap would function like a regular site as you are just including js and css files to make it work.
Lauri Hasko
3,367 PointsOk, you have been very very helpfull, CD, Thank you.
I just here so much talking about this thing that I don't even belive Treehouse even I want. And the what about the programmer who opens up app.js file and there isn't document ready .. could this be commented or be somekind of standard in future.. okey maby I made too big thing about this but this is a big thing I think. Where to load jQuery. See u, first step completed and I must say...
I have tried Tutt Plus Premium video courses about jQuery they are good, some would say very good. I would say that they are ok what I have experienced here. Treehouse is 100% Lynda.com and Tutts Plus something like 75% .. my opinion is that the difference is huge. So that is why .. hmm.. maybe I should just continue jQuery Basics and learn to be better developer.
Chris Dziewa
17,781 PointsAnytime Lauri! You could always include $(document).ready() even with the js at the bottom and you would be fine. It would be redundant but nothing would break. I like the new jQuery course on here. I also really like the free try jQuery course at Code School which takes about 3 hours to complete for absolute beginners to jQuery. I learn on both sites and both complement each other.
Lauri Hasko
3,367 PointsOk, one more thing... if the CDN doesn't work fast .. so jQuery doesn't load fast enough should you then use document ready.. I just want say that Treehouse teaches coding.. and they should explane so critical thing carefully.
Chris Dziewa
17,781 PointsI personally use the CDN from google. It will generally work faster. jQuery's CDN is ok for developing but I don't even use it for that. You could save the file to your project but so far I haven't needed to do that.
Lauri Hasko
3,367 PointsLauri Hasko
3,367 PointsLink to the video.