HTML / jQuery: How to properly include external jQuery file
Question
I am new to JS and programming in general and hope someone can help me with this.
I am currently working on building a website where every page has its separate HTML / PHP file. jQuery and my global / general JS functions are included in the footer of all these pages through a separate includes file " footer.php ".
So far everything works as intended.
Now I have some pages that will use specific jQuery functions so I want to load the corresponding JS only if such a page is loaded.
To do this I saved the corresponding codes in separate JS files (eg nameOfExternalJsFile.js ) and wrapped everything in there in the following:
$(document).ready(function(){
// ...
});
I then made the following updates to the corresponding PHP pages (example):
<head>
<?php
require_once("includes/header.php");
?>
<!-- here I want to include the specific jQuery functions -->
<script src="includes/js/nameOfExternalJsFile.js"></script>
</head>
<!-- ... -->
<!-- here I include the main JS functions -->
<?php require_once("includes/footer.php"); ?>
I have two concerns with this:
- I am not sure if this is the right way of including such files since I need to have them available on document ready.
- I include my main JS in the footer since I was told this improves performance but can I then include jQuery functions in the header at all ?
Can someone let me know if this is correct or if I should change anything here ?
Many thanks for any help with this.
4 answers
solution1
3 ACCPTED 2015-06-29 16:46:38
- Wrapping the functions in
$(document).readyautomatically takes care of this concern. From the JQuery documentation on document.ready .
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Technically it doesn't matter whether you include the scripts in the header or the footer, as long you load JQuery first and your script second.
That said, it's generally recommended that both scripts go just before the closing body tag to increase performance as you suggested. There are some articles that discuss this like this post from performance expert Steve Souders and this guide from the Yahoo! Exceptional Performance team.
solution2
1 2015-06-29 16:39:25
You should load the $(document).ready(...) stuff only after you have loaded jQuery, that is, in the footer file, after the jQuery <script> tag, like this :
<script src="includes/js/jQuery.min.js"></script>
<script src="includes/js/nameOfExternalJsFile.js"></script>
solution3
1 2015-06-29 16:40:59
It`s good practise to locate all the JS files in the end of the body
<html> <head></head> <body> ... Some HTML <script>SomeScripts</script> </body> </html></pre>If you want to be sure that your external scripts are loaded after page load use: $(function(){ /* Your code from the scripts */ });
solution4
0 2015-06-29 16:40:50
You can change the content of footer.php to include /nameOfExternalJsFile.js manually at the bottom of the page. That´s the safest way to do it because you may load jquery before loading others scripts.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.