Loading Scripts with jQuery

By  on  

JavaScript loaders are incredibly powerful and useful utilities.  I've even covered a few of them on this blog, like curljs and LABjs, and have used RequireJS and the Dojo loader on personal projects.  They're super powerful but can be overkill in some cases.  If you're using jQuery, there's a built in method for loading a single script which may come in handy if you'd like to lazy load a plugin or any other type of script.  Here's how to use it!

The jQuery JavaScript

jQuery is fitted with a getScript method to load one script; handling the result can be done in a few ways.  A basic usage of jQuery.getScript would look like:

jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {

	/* 
		do something now that the script is loaded and code has been executed
	*/	

});

The getScript method returns a jqxhr so you can also use it as a follows:

jQuery.getScript("/path/to/myscript.js")
	.done(function() {
		/* yay, all good, do something */
	})
	.fail(function() {
		/* boo, fall back to something else */
});

The obvious use case for jQuery.getScript is lazy loading of a plugin and using it once loaded:

jQuery.getScript("jquery.cookie.js")
	.done(function() {
		jQuery.cookie("cookie_name", "value", { expires: 7 });
});

If you need to do more advanced stuff like loading multiple scripts and different types of file types (text files, images, css files, etc), I'd recommend you switched to a JavaScript loader.  In the case of wanting to lazy load a plugin and not simply load it with each page, getScript is perfect!

Update: Caching

It's important to note that when using jQuery.getScript, a timestamp is added to the script URL so the script ends up not being cached. Unfortunately you need to override all caching to cache the script and still use jQuery.getScript:

jQuery.ajaxSetup({
  cache: true
});

If you don't want to override all caching with your AJAX requests, it's best the use the jQuery.ajax method with a dataType of script:

jQuery.ajax({
      url: "jquery.cookie.js",
      dataType: "script",
      cache: true
}).done(function() {
		jQuery.cookie("cookie_name", "value", { expires: 7 });
});

Keep caching in mind when loading your scripts!

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

  • By
    MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

Discussion

  1. Nice! Makes me want to dig through all the available jQuery methods again.

  2. Just remember getScript appends a random value on the GET request to prevent caching. If you actually want to allow caching of the script you have to roll your own $.ajax method.

  3. Excellent post!

    However, be aware that the default behavior of getScript is to load the content using AJAX and insert it in an inline script-tag on the website. Because the browser has no way to tell where the content actually came from, the dev tool (built-in, Firebug etc.) cannot give ANY helpful information at all (most likely it will refer to a non-existing line in the jQuery file) if there is any error in the loaded JavaScript file.
    To avoid this behavior, one can instead use $.ajax and set crossDomain: true in the parameter object. This forces jQuery to instead create a script-tag with the src-attribute set to the url of the script and debugging will again work as expected.

  4. Nice post as always! Will use this in my future projects for sure!

  5. Wrote an extension to the getScript method that allows for multiple scripts to be loaded synchronously and asynchronously. Hope it helps!

    https://github.com/hudsonfoo/jquery-getscripts

  6. Squeak

    Is it possible to use getScript to load JS file when a select box is clicked?

    I found a plugin with ~50 translations (eternicode datepicker). Since my app has a “choose language” select box, it would be nice if I could load the file(s) when requested by user. If it is possible, an example would be helpful for the noobs like me. :)

  7. James

    What about loading 3rd party scripts and setting a timeout?
    Lets say I do not want a 3rd party script to hold up the loading of my site, is it possible to have a timeout with this so that – lets say, after 5 seconds, if it hasn’t loaded I can abort the getScript call?

    • James, would this work?

      $.ajax({
          url: "jquery.cookie.js",
          dataType: "script",
          error: function(){
              // will fire when timeout is reached
          },
          success: function(){
              //do something
          },
          timeout: 5000 // sets timeout to 5 seconds
      });
      
  8. Pieter Pol

    > do something now that the script is loaded and code has been executed

    This is not true. The script is loaded at that point but not necessarily executed. Check the API docs.

    • Mike S.

      Pieter Pol is right. The API docs and personal experience say so.

  9. Prakash

    Hi,

    Nice post, I have a question here. Is it possible to add and get multiple JS files using getScript(), Thanks in advance.

  10. Note that you can also set cache:true for the specific getScript request if you use the options object signature:

    $.getScript({
        url: "foo.js",
        cache: true
    })
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!