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 (e.g. 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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Wrapping the functions in $(document).ready automatically 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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 29, 2015 at 16:46

Equalsk

8,2643 gold badges47 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TaneMahuta Over a year ago

Thanks a lot for this ! The PHP footer include is the last line before I close the body tag so this should be ok then, right ? Regarding the document ready line, I can keep this on the external file as long as I include jQuery first and then this external file, correct ?

Equalsk Over a year ago

Yes on both counts :-)

Manan · Accepted Answer · 2015-06-29 16:39:25Z

1

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>

answered Jun 29, 2015 at 16:39

Manan

9999 silver badges11 bronze badges

Comments

Vladislav Hadzhiyski · Accepted Answer · 2015-06-29 16:40:59Z

1

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 */
    });

answered Jun 29, 2015 at 16:40

Vladislav Hadzhiyski

411 silver badge2 bronze badges

Comments

Daniel Resnitzky · Accepted Answer · 2015-06-29 16:40:50Z

0

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.

answered Jun 29, 2015 at 16:40

Daniel Resnitzky

112 bronze badges

Collectives™ on Stack Overflow

HTML / jQuery: How to properly include external jQuery file

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related