Javascript On Demand with jQuery.getScript()
Ever wonder if there was a better way to load external scripts and improve your website's loading performance? Once again, jQuery to the rescue!
With the jQuery.getScript() method, you can load external scripts exactly when you need them. (The old approach is just load everything you might need all at once either at the top of the page within the , or at the bottom after all of the DOM elements load.)
To implement the jQuery.getScript() method, take a look at the following example:
jQuery Script
$('a#someLink').click(function () {
$.getScript("/scripts/jquery.radpluginXL.js", function() {
//some fancy code goes here
});
});
How it works
The above code will check for the existence of an object, in this case that object is any anchor link with an id of "someLink". If this object is found on a page and clicked, a corresponding .js file (scripts/jquery.radpluginXL.js) will be loaded and a callback function initiated. If the object is not found, the script will not be loaded. This assumes that the snippet is enclosed in a document ready event.
Conclusion
Although this isn't for everyone or every scenario, I find this to be a very useful and clean way of loading external scripts and would be worth considering for anyone interested in page load optimization.
Speak your mind