javascript - HTML / jQuery: How to properly include external jQuery file -


i new js , programming in general , hope can me this.

i working on building website every page has separate html / php file. jquery , global / general js functions included in footer of these pages through separate includes file "footer.php".

so far works intended.

now have pages use specific jquery functions want load corresponding js if such page loaded.

to saved corresponding codes in separate js files (e.g. nameofexternaljsfile.js) , wrapped in there in following:

$(document).ready(function(){    // ... });  

i made following updates corresponding php pages (example):

<head>     <?php          require_once("includes/header.php");     ?>      <!-- here want include specific jquery functions -->     <script src="includes/js/nameofexternaljsfile.js"></script> </head> <!-- ... --> <!-- here include main js functions --> <?php require_once("includes/footer.php"); ?> 

i have 2 concerns this:

  1. i not sure if right way of including such files since need have them available on document ready.
  2. i include main js in footer since told improves performance can include jquery functions in header @ ?

can let me know if correct or if should change here ?

many this.

  1. wrapping functions in $(document).ready automatically takes care of concern. jquery documentation on document.ready.

a page can't manipulated safely until document "ready." jquery detects state of readiness you. code included inside $( document ).ready() run once page document object model (dom) ready javascript code execute.

  1. technically doesn't matter whether include scripts in header or footer, long load jquery first , script second.

    that said, it's recommended both scripts go before closing body tag increase performance suggested. there articles discuss this post performance expert steve souders , this guide yahoo! exceptional performance team.


Comments

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -