Using Head.js to Load All Your JavaScript


Using Head.js to Load All Your JavaScript

In This Article We Discuss About Using Head.js to Load All Your JavaScript. Client side frameworks have become very powerful and offers unique features to implement complex functionalities on the client side, instead of relying on server side. This is really great for developers, but it has also made life difficult when it comes to managing multiple resources. One of its disadvantage is that loading multiple JavaScript file makes the site slow to load. This is because scripts block the rendering of the page until they are downloaded, parsed and executed. This can be fix by using a Script loader library, and of these Head.js is the most popular.

What is Script Loader?

There is no concrete definition for Script loader, but one can think of Script loader as a library that helps in loading multiple JavaScript files without blocking the page rendering. Script loader will load the script files asynchronously, which results in non-blocking of page rendering.

Head.js

Head.js is a tiny script to simplify, speed up, and modernize your site. It loads JS & CSS asynchronously and in parallel, but executes them in order. It is cross-browser compatible, makes use of media queries to support responsive design and also supports feature detection like modernizr. To use it, download the library and include its reference in thesection. Finally, load all your scripts using the load method which accepts a list of script files and provides a callback function to indicate loading is completed. Like this:

head.load(‘file1.js’, ’file2.js’, function() {

console.log(‘loading completed’);

});

It also provides event listeners like jQuery’s document.ready(), called head.ready(). If you don’t specify the callback function in load method, then use head.ready() which indicates that loading of scripts is finished. Like this:

<script>

head.load(‘file1.js’, ’file2.js’);

</script>

<script> head.ready(function()

{ // loading finished.

});

</script>

Head.js offers many useful features and one of the best features is the ability to label the scripts and execute code once the label is loaded, irrespective of other file’s loading status. The following code will create the label:

head.load({ jQuery: “scripts/jquery.js” },

{ tweet: “scripts/twitter.js”

});

In the above code, there are 2 labels. One named jQuery for jQuery library and another called “tweet” for a twitter library. You can name it anything. Now, let’s say you want to execute the piece of code (completely dependent on jQuery) as soon as jQuery is loaded (irrespective of twitter loading status), you can check for the label in the head.ready() listener. Like this:

head.ready(“jQuery”, function() {

//code that dependent on jQuery

});

You can also pass a file name, instead of label in head.ready() and achieve the same thing.

head.ready(“jquery.js”, function() {});


 

Leave a Reply

Your email address will not be published. Required fields are marked *