Lazy load javascript using jQuery. Implement the on demand javascript paradigm and reduce rendering page time while allowing for a more modular way of implementing your web applications.
A Facebook friend asked some help about implementing an “on-demand” loader for javascript. I searched the internet to find a jQuery plugin which would implement this functionality but mostly I would find references to the .getScript function.
That’s why I decided to create a plugin in my favorite javascript framework, to allow for jquery script lazy loading (or on demand javascript as some may call it).
Required functionality
- The plugin should be able load external javascript files on demand.
- If a file is already loaded, then don’t load it again.
The plugin
(function($){
var my_lazy_loader_loaded_files = new Array(); //Will hold all loaded files
$.fn.lazyloadScript = function (filename,callback_func,callback_already_loaded) //callback(data,status)
{
//Check if the file is already loaded
var length = my_lazy_loader_loaded_files.length;
for(var i = 0; i < length; i++) {
if (my_lazy_loader_loaded_files[i] == filename)
if((callback_already_loaded)&&(typeof callback_already_loaded== 'function')){
callback_already_loaded.call(this);
return false;
}
}
if((callback_func)&&(typeof callback_func == 'function')){
jQuery.getScript( filename, function(data)
{
my_lazy_loader_loaded_files.push(filename);
callback_func.call(this,data)
return true;
});
}else
{
jQuery.getScript( filename, function(data)
{
my_lazy_loader_loaded_files.push(filename);
});
}
return false;
}
}) (jQuery);
How to use it
As you can see it’s a typical jQuery plugin. The function lazyloadScript takes three parameters which will allow you to specify the filename, and two callbacks (one to be called after a file has been loaded and one if the file is already loaded).
So, for example you can try the following:
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type='text/javascript' src='jquery.lazyloadscript.js'></script>
</head>
<body>
<script type='text/javascript'>
$('.clickme').click(function() { $(document).lazyloadScript('myjs.js',function(){alert('just loaded myjs.js !');},function(){alert('already loaded myjs.js!');}); return false;});
</script>
<a href='#' class='clickme'>Load the myjs.js script</a>
</body>
</html>
Line 3: Load jQuery from Google CDN
Line 4: Load the jQuery Lazy Load Script plugin
Line 5: Bind the click event of the ‘a.clickme’ tags to load the myjs.js script. If the script is loaded alert the user on this, if it’s not alert and tell him that you have a “cache hit”.
Possible usage
Using the on demand javascript concept can really diminish the page loading time (as scripts are loaded only when requested). Moreover, it can simplify things for Ajax based web applications. For example, in order to implement loading loading AJAX widgets on demand (for example “widgets” in a dashboard), typically you should do the following :
- Before the page is served , gather all components which will be shown. Each one should use something like wp_enqueue_script to register its script needs.
- Show the page containing the ajax calls to components
- Run the components Ajax code.
Using the lazy loading script plugin we can achieve much more portable widgets:
- Show the page containing the ajax calls to components and initialize the jQuery lazy loading script plugin
- Run the components Ajax code.
- Each component lazy loads all the required script functionality.
- Already loaded scripts don’t get loaded again.
- All this is done in client side so, the server is relieved from the effort
Download
Download jQuery Lazy Load Script (299)
