Dynamic JQuery plugin files load
Improve page load when using multiple JQuery plugins
You all probably had to deal with certain js files for JQuery plug-in. Usually developers add reference to a js file in Master page (if using WebForms) on layout view (is using MVC).
This practice is not so bad, because you have references maintained in one file, but bad thing is that all js file are being load even if none of then are used on the particular pages.
To remind you, every additional file is additional web request which affects page loading performance, especially if you have a big website and you have to load a bunch of additional JQuery plug-ins and other JavaScript libraries.
You can always handle this by bundling all files to one. This is good because you will have only one request, but it makes problems when you want to debug script in browser. It is really hard to locate bug in file where everything is mixed together.
Another nice way, which I started using is dynamic script loading from script based on page structure.
Usually you keep all js files you use in one folder. Lets assume that that folder is named Scripts and it is located on the root (/Scripts).
File structure of this folder usually consists of the following JS files:
- JQuery library (if not useng CDN)
- Custom js file where you put your custom javascript/JQuery functions
- Plugin js file (e.g. lightbox.js, jquery.blockUI.js, jquery.flexslider.js, etc)
This approach requires refernces only first and second file from a list above. Plugin script files are loaded dynamicaly in your custom function which is triggered on document ready event.
$(document).ready(function () {
//plugin loading logic
});
Logic for dynamic script loading is basically very simple. Function should check whether container on which plugin needs to be applied exists or not. If container exists then load script and invoke initialize method for plugin.
$(document).ready(function () {
if ($(".flexslider").length > 0) {
$.getScript("/Scripts/jquery.flexslider.js", function () {
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 4000
});
});
}
});
This approach is especially useful if you are referencing some large library such as GoogleMaps. Loading of Google maps will not affect page loading speed because GoogleMaps API it self will be loaded after the whole page is loaded and DOM ready.
If you want to make your code bullet-proof you need to add one more check and that is checking whether plug-in was previously loaded.
If there are more than one developer working on a project, there will be more chances for something like that to happen.
$(document).ready(function () {
//Plugin check - flexslider
if ($(".flexslider").length > 0) {
if (!jQuery().flexslider) {
$.getScript("/Scripts/jquery.flexslider-min.js", function () {
initFlexSliderPlugin();
});
}
else {
initFlexSliderPlugin();
}
}
});
function initFlexSliderPlugin() {
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 4000
});
}
In this example, to avoid code repeating, plug-in initialization is moved to a separate function named initFlexSliderPlugin.
It might look a bit more complicated than just a simple js file reference in a main page template, but this way you have both optimized script loading and you are ensured that reference is loaded only once and only when it is needed on every page of your website.
Disclaimer
Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.
About the author
DEJAN STOJANOVICDejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects
Comments for this article