Quick Tip: Get more efficient with jQuery’s getScript!

So recently, I’ve been working on a project that uses a multitude of different jQuery plugins, but they’re not all needed on the same page, and it seemed not only unnecessary, but silly to be loading over 10 plugins when maybe only 2 are used on the current page. I sent myself on a mission to work out how to stop being a resource hog, and only load what was needed on the page I was on.

My initial thoughts

I figured, hey, jQuery is logical to code, and so I came up with a logical way to fix it in my head.  It went something like this:

I need a way to work out whether a script was required on the page, so I decided I’d apply a unique class to the body for each plugin I required on the page. Then, using multiple if statements in jQuery,  I’d append the script tag with the relevant url to the right plugin, and fire off the plugin function while I was at it depending on what classes were found on the body.

As it turned out, only half of this logic worked. The logic behind checking what classes were applied to the body was spot on, it worked a treat, but appending the scripts to the head didn’t work. After a bit of research, I found that

jQuery detects that you’re trying to create a SCRIPT element and will automatically run the contents of the element within the global context.


I thought “fair enough, jQuery is being clever” but my scripts were still not being run. I researched further, and finally stumbled across the holy grail to my problem, getScript.

What is getScript?

GetScript is a jQuery ajax function that loads a script from your specified url and has an extremely useful callback function for when the script is loaded. This is exactly what I needed.

For those of you who maybe understand a bit more ajax, jQuery’s documentation states that this getScript function is simply a shorthand version of this:-

  url: url
  dataType: 'script',
  success: success

The shorthand getScript version simplifies this however, so set to work with it.

Putting it to use!

We are going to go back to our original logic and replace it with our new jQuery function. Here’s how it looks when we turn that pseudo code (logic) into working code.

$(document).ready(function() {
  if $('body').hasClass('script') {


This isn’t the end though. We are only halfway to making the most intuitive fix that we can. There are two enhancements that I made, the first being the most important. If you’ve read the documentation for jQuery’s getScript function, then you’ll have noticed its callback argument. Instead of firing the functions from the script we are loading below it, why not make use of its callback function and fire it once the script loads? Who knows, what if our script fails to load; our current version would then stop all jQuery on the site working! Not what we want.

$(document).ready(function() {
  if $('body').hasClass('script') {
    $.getScript('script/url.js'), function() {

Less important for most people, but useful for me was my last improvement. I figured, why should I do the work when jQuery can do it for me? Most of my jQuery plugins hook to a certain element such as select, or a div#slider, so why manually search through the html files and assign classes to the body when we can make jQuery search through for me?

Heres a small snippet of code from one of my current projects which brings together everything we’ve discussed and learnt.

$(document).ready(function() {
  if ($('select').length > 0){
    $.getScript('js/jquery.stylish-select.min.js', function() {

Using jQuery’s ‘.length’ function we search through the document for the element ‘select’. If it is present (a.k.a more than 0) then we run the stylish select script, and if it loads we’ll apply the script to the element.

Further Discussion

I do not claim to be a jQuery ninja, or anything of the sort. If you can further improve this simple but useful concept or have another idea on solving this common issue with ease, then I’d love to hear them; I’m always up for an insightful discussion.

Matthew Corner

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now


  1. Gareth Mueller says

    The problem with this solution is that you’re still having to query the DOM for select elements, or whatever else you choose. This means that every page request has to search the entire DOM.

  2. Joshua says

    I have been using a similar style of script for a larger client site that I have been working on. The site it’s self is a portfolio for a musician/actor, and the site has about 12 pages included. Each page has it’s own style and niche and I use Jquery through-out the site and different scripts for each page.

    if ($(‘#content’).length) {
    $.getScript(‘lib/jquery.someElement.js’, function() {

    The only problem that I feel that I run into is, when a getScript loads that interacts with an element that will be altered or turned into a slideshow or something to that effect, both Chrome and Firefox make an odd flashing before displaying the element that is mentioned in the function after the getScript. When I move the script out of the getScript and load it with the html, then call the function — it looks wonderful.

    I hope that makes sense, I was just wondering if there was something similar to return false that would not allow that to happen. Thanks in advance.

  3. vimal says

    I am looking on some thing where I can combine and load multiple javascript files at ONE shot. This requires some server side programming as well since I am C# developer I can look at using handlers (ashx) which I can call and in response it combine multiple scripts.
    Does any one know how would I flush back this combined script file which I can successfully handle from ajax call ?

    Thanks in advance


  4. says

    there is apparently a typo in the first snippet of the Improvement! section. I mean the closing parenthesis before the comma, where comma should follow the url string literal and the parenthesis goes after the callback function body.

  5. Darlinton says

    Can you load css with it?
    Cause, many jquery plugins need a css, so load both togheter look good..

    • Matt Corner says

      No, this is just for scripts, but with css, you could append the css link to the head as jquery wont stop you doing that like it does for scripts.

      I however, stumbled across a lightweight jquery plugin today that does exactly what you are looking for, only loading the right css and jquery for the necessary element on the page.


      At the time of writing this article, I was unaware of this script, but it certainly looks like a great alternative.

      It would appear you hook the stylesheets and plugins to the plugins function name, and if that function is called, the stylesheet and plugin in question will be called so that the function can run.

  6. says

    Maybe I’m not understanding your problem completely, but wouldn’t it be easier to load the plugins for their respective pages via PHP? For example, in PHP you find out what the current page is, then check to see what it is, and echo out the script tag if the current page matches where the plugin should be. If using WordPress, then you could check the page ID and do the same thing.

    Is this not easier than using jQuery itself to check for it?

    • Matt Corner says

      You do understand me correctly. I decided to do this via jquery because the project I researched this for was for a template to be sold to the masses. Therefore php isnt really an option.

  7. Elliot says

    Nicely done.

    Thanks for the code share. This one is bound to come in handy

  8. David says

    Thanks Matt – very useful indeed – the logic you’ve applied makes perfrect sense to me, and has also given me a couple of ideas for a few things I’ve been working on.

    • Matt Corner says

      No problem David, glad you enjoyed it, and it’s helped you with some ideas =)