Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are there negative effects from not loading jQuery in the <head> tag?

I currently am working on a large site with many different issues to contend with. One being that I have no easy way to include a script into my <head> without manually doing it for 500+ pages.

I have the possibility to include jQuery.min just inside the <body> tag from an include located there.

My question is, aside it not being a standard implementation, would there be any negative effects from not loading jQuery within the <head> tag? Will all the functions be available?

I am aware that if I do this, I will not be able to call jQuery from within the <head> or before this include... that's okay.

example:

<head>
Standard Head Stuff
</head>
<body>

<div>Some Content</div>

<!-- My Include is roughly here -->
<script type="text/javascript" src="jquery.min.js"></script>

<div>More content</div>

<script type="text/javascript">
 $(document).ready(function(){
// Put my jQuery commands here
});
</script>

</body>
like image 314
dpmguise Avatar asked Jan 20 '11 01:01

dpmguise


People also ask

Should jQuery be in head or body?

It's always a good practice to add jQuery code in footer i.e. just before the closing </body> tag. If you have not done that, then use the defer attribute.

What will happen when we put the script tag inside the head tag in the HTML?

It is not optimal to put script tags in the <head> section - this will delay display of the visible part of the page until the scripts are loaded.


2 Answers

The only issue is that a page is loaded from top to bottom and so if you were to place the include statement into the header than you would be assured that the library would be loaded immediately. Otherwise the library may only be loaded at a later time which can cause a delay in some effects potentially.

like image 81
Bnjmn Avatar answered Oct 05 '22 08:10

Bnjmn


Head or body, inline code will execute when phrased. Code is generally placed in the head so external libraries can be loaded before the page is (so effects can be run on dom ready). Code in the body will be run once the dom is done with the header code, and done loading page elements (once in the body, elements are loaded from top to bottom). So any code in the body will be executed once the page had loaded (up to that point)

like image 22
Colum Avatar answered Oct 05 '22 06:10

Colum