How To Use Head.js to Load All Your JavaScript


Head.js to Load All Your JavaScript

This is really great for developers, but it has also made life difficult when it comes to managing multiple resources. One disadvantage is that loading multiple JavaScript file makes the site slower to load. This is because scripts block the rendering of the page until they are downloaded, parsed and executed. This can be fixed by using a Script loader library, and of these Head.js is the most popular. This post shows how to use Head.js to load all your JavaScript, including third party libraries like jQuery.

First of all, let’s take a look at what Script loader is and how it works…

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. For the sake of argument, combining all your script files, then minifying them in a single file will definitely provide better performance, compare to loading multiple files. But that will also result in blocking of the page.

While using Script Loader, one thing to note is that your JavaScript code should only run when all your script files are loaded. There is no guarantee when a particular file will be loaded, so it is best to ensure that they are all loaded before running.

Now, let’s take a look at head.js

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>

 

Leave a Reply

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