JavaScript - How do I make sure a jQuery is loaded?

There are several answers already, each of them work great but all of them depend on making sure jQuery is downloaded synchronously before any dependencies try to use it. This approach is very safe, but it can also present an inefficiency in that no other resources can be downloaded/run while the jQuery library script is being downloaded and parsed. If you put jQuery in the head using an embedded tag, the users browser will be sitting idle while downloading and processing jQuery when it could be doing other things like downloading images, downloading other scripts, etc.

If you are looking for speedy responsiveness on startup, every millisecond counts.

A huge help to me over the last year or so has been Steve Souders, first when he was at Yahoo, and now at Google. If you have time, check out his slides for Even Faster Web Sites and High Performance Web Sites. Excellent. For a huge paraphrase, continue here.

When attaching javascript files to the DOM, it has been found that putting an inline <script> tag in the <head> of the document causes most browsers to block while that file is being downloaded and parsed. IE8 and Chrome are exceptions. To get around this, you can create a "script" element via document.createElement, set the appropriate attributes, and then attach it to the document head. This approach does not block in any major browser. 

<script type='text/javascript'>
    // Attaching jQuery the non-blocking way.
    var elmScript = document.createElement('script');
    elmScript.src = 'jQuery.js'; // change file to your jQuery library
    elmScript.type = 'text/javascript';        
    document.getElementsByTagName('head')[0].appendChild( elmScript );
</script>

This ensures that jQuery, while downloading and parsing, is not blocking the downloading and parsing of any other images or javascript files. But this could present a problem if you have a script that depends on jQuery finishes its download before jQuery does. jQuery won't be there and you will get an error saying $ or jQuery is undefined.

So, to ensure that your code will run, you have to do some dependency checking. If your dependencies are not met, wait for a little while and try again.

<script type='text/javascript'>
runScript();

function runScript() {
    // Script that does something and depends on jQuery being there.
    if( window.$ ) {
        // do your action that depends on jQuery.
    } else {
        // wait 50 milliseconds and try again.
        window.setTimeout( runScript, 50 );
    }
}
</script>

Like I said earlier, there are no problems with the approaches shown before, they are all valid and all work. But this method will ensure that you are not blocking the download of other items on the page while waiting for jQuery.

This approach will work for any file, so if you have to include 10 js files, you can attach each of them using this method. You just have to make sure your check function checks for every dependency before running.


There could be two issues. First, you need to make sure that jQuery is included before any scripts that use it. This can be tricky if you have javascript embedded in partials. If you load jQuery in the header and all of your other script in a script block at the end of the body, you can be sure that jQuery is loaded before your other code. I try to put everything at the end of the body, with jQuery being the first script loaded.

Second, you need to make sure that the DOM is fully loaded before trying to use it in your scripts. jQuery provides a ready method for this. Wrap your code inside the ready method and you can be (more) sure that the DOM is available for you to work with. Not all images may be loaded, but you should be ok with most everything else. For images you may have to take more pains to make sure that they are loaded if that is critical to your code.

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script>
$(document).ready( function() {
   ...your code here...
});

or (shorthand)

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script>
$(function() {
   ... your code here...
});

The jQuery library should be included in the <head> part of your page:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

Your own code should come after this. JavaScript is loaded linearly and synchronously, so you don't have to worry about it as long as you include the scripts in order.

To make your code execute when the DOM has finished loading (because you can't really use much of the jQuery library until this happens), do this:

$(function () {
    // Do stuff to the DOM
    $('body').append('<p>Hello World!</p>');
});

If you're mixing JavaScript frameworks and they are interfering with each other, you may need to use jQuery like this:

jQuery(function ($) { // First argument is the jQuery object
    // Do stuff to the DOM
    $('body').append('<p>Hello World!</p>');
});

Tags:

Javascript

Jquery

Recent Posts