A problem that comes up every once in a while when writing a website is: how do I load a JS file programmatically and execute something after it's loaded?
A reason why you might want to do this is that you don't want to load a big ass bloated framework jQuery just to show a date picker in a specific page or function of your website or AJAX application.
There are several ways to accomplish this, but in this article I want to show a solution that I don't see used very often: using XHR to load the JS file, and using eval to parse it.
This is a very simple solution, it can be made compatible with browsers as old as IE6 (and possibly older), and can load any type of JS file, from alert("Hello world") to jQuery.
You are free to copy, modify and use this code as you wish.
Let's say I want to have a checkbox for smooth scrolling on the page. It would be a waste to load it when it's not used, so when smooth scrolling is turned on, we can call this:
Want parallax scrolling too? To load multiple files, we can nest loadJS calls using the onDone callbacks. CSS files can also be loaded by appending them to the document:
If a JS file is loaded after an event (for instance, pressing a button), it may be a good idea to not load the file again after the first time, to improve performance. Use flags for this.
This is not mandatory, as browser caching will prevent multiple loads, but it will improve performance because eval will only be called once
When you press the button below, test.js will be loaded. It contains a simple Hello world.
This website does not use jQuery and loads pages via AJAX (that means no page reloads). The date picker shown below is the jQuery UI datepicker plugin, and is only loaded when you open this article using the loadJS function shown in this article.
The code shown so far will work on all modern-ish browsers, more specifically, IE9+.
To get IE6+ compatibility, we need to make a few changes:
The browser enforces same origin policy on XHR, therefore you can only load JS files from your domain.
If you need to load a JS file from another domain and you can't copy it to your domain, you cannot use this solution.
A way to get this done is to append a <script> element to the document and use setInterval to wait for a function to become defined, then you clear the timer and do whatever required that JS.
This method is used extensively on this site (even if I don't load anything external), but can only load JS files that define functions (such as libraries).
Download code and examples
Both versions of loadAsync.js are included.