Will linking javascript files in the body rather than in the header cause a problem?
this is what im trying to do
<script type="text/javascript" src="resources/application.js"></script>
<script type="text/javascript" >
$(document).ready(createHeader());
$(document).ready(scriptSet());
</script>
id like to avoid having to separate the two, and while generally i see script links only inside the header the document.rea开发者_开发知识库dy functions dont seem to work when put there. However, everything seems to work completely fine when placed at the end of the body, so would this cause any problems or is this fine?
Functionally, as long as you enclose your code inside a $(document).ready(function(){ }); and it comes after the jQuery file includes, it does not matter if it's in the head or the body. $(document).ready ensures that the DOM is fully loaded before any script is executed.
HOWEVER, putting all of your script includes and scripts at the bottom of the body is best for loading performance.
This article explains it nicely.
Example:
<body>
<!-- MY HTML CODE -->
<!-- START javascript -->
<script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script>
<script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script>
<script type="text/javascript" src="/javascript/some_other_scripts.js"></script>
<script type="text/javascript" language="JavaScript">
//<![CDATA[
$(document).ready(function(){
// my code
});
//]]>
</script>
<!-- END javascript -->
</body>
There is no problem with having script tags in the body. Just remember that the page is parsed top-down, so scripts have to be included before they are used.
You do realize that the functions you have put inside $(document).ready() are not going to wait for DOMContentLoaded to fire? You have to wrap them inside a function call (event handler) in order to avoid calling them instantly when they show up in the code. An anonymous function is usually just fine.
$(document).ready(function(){
createHeader();
scriptSet();
});
I have deployed a number of web applications, and haven't ever had a problem with the script being in the body tag. I like to place it at the end of the page so as not to impede download progress of the visible elements on the page. I believe that Google has also done this with some of their scripts (maybe Analytics?).
Like some of the others have said, make sure that you have your jQuery reference before the $(document).ready(); call. It's easy to slip past, and hard to troubleshoot :)
JMax
Nop, in fact its good for "performance" to put your scripts at the end of your HTML.
Still a good practice is to have all your javascript in another file and just set a header calling it, if posible even compressing the file.
Now, I would change that code for this
$(document).ready(function(){
createHeader();
scriptSet();
});
so you dont call $(document).ready twice :)
It typically does not matter if you put your script includes and blocks within your BODY element; they'll run perfectly fine in most cases. Some people believe it a bad practice, but it's not a wrong practice. It happens all the time.
However, I'd like to point out that it will not matter where you put a $.ready() function call, as long as it's after the jQuery include, as it will always run AFTER the DOM is ready (which will occur AFTER page load). So, in this case it doesn't make any difference.
Note the anonymous function in the function call. This passes a reference to $.ready() for the anonymous function, which allows it's function body to be executed at a later time, hence your functions will be called at a later time.
<script type="text/javascript">
$(document).ready(function(){
createHeader();
scriptSet();
});
</script>
加载中,请稍侯......
精彩评论