How to loading asynchronous JavaScript but execute it in order

A few months ago I I found an article on Dean Hume’s website that talks about a new attribute on HTML5 called ‘async‘ that can be used to load Asynchronous JavaScript.

Looks great, doesn’t?, just think on the possibilities!!, but wait, reading the post I found that is only supported on IE10+, to bad since I still work on projects where the standard involve using IE7/8, so will not be possible at least for me to start using this new feature in a current project, the dream was to short, well at least at that moment.

<script type="text/javascript" async></script>

This new attribute also has another limitation, in situations where you work with dependent JavaScript (located in different files), you can’t call two or more JavaScript files asynchronous, using ‘async‘, and expect that your code works fine all the time, that happens because you don’t know if the JavaScript files will be loaded in order or not, to avoid this situation there is a ‘defer’ attribute.

<script type="text/javascript" defer></script>

It is also very similar but instead of loading the file asynchronously, it guarantees that the files are executed in the order they occur in the page. It only runs the scripts after parsing is completely finished. But that is not what I was looking for.

Just take note that the browser support for the Async attribute looks like this (from Dean Hume post):

FireFox 3.6+
Internet Explorer 10+
Chrome 8+
Safari 5.0+
Android Browser Honeycomb and Ice Cream Sandwich
Possible support in Opera starting in 12+

Also you can check on the IE website the HTML5 Async scripts loading example, it gives a good understanding of what I’m talking about.

Well at this point, I haven’t answer the question and the objective of this post, how to loading asynchronous JavaScript but execute it in order?, luckily some days ago I found Head JS. As the page says:

“With Head JS your scripts load like images – completely separated from the page rendering process. The page is ready sooner. Always. This is guaranteed even with a single combined JavaScript file.

Non-blocking loading is the key to fast pages. Moreover Head JS loads scripts in parallel no matter how many of them and what the browser is. The speed difference can be dramatic especially on the initial page load when the scripts are not yet in cache. It’s your crucial first impression.”

Fantastic, isn’t!!??, and works on IE7/8+, horay, just what I was looking for!!.

But, how do we use it?

First add Head JS file on head section:

<script type="text/javascript" src="/path/to/head.min.js"></script>

Second, add, in order, all the js files you required inside of head.js() and execute a function to call your JavaScript code as following:

// load a script and execute a function after it has been loaded
<script type="text/javascript">
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js",
function() {
    // all done
});
</script>

All combined:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML</title>
        <meta name="description" content="" />
        <meta name="author" content="Joaquin Alonso Arellano Ramirez" />

        <script type="text/javascript" src="head.min.js"></script>
        <script type="text/javascript">
            head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js",
                "http://code.jquery.com/ui/1.9.2/jquery-ui.js",
                 function() {
                    $(".example").slideToggle();
            });
        </script>
    </head>

    <body>
        <div class="example" style="display: none;">
                Hello Word!!
        </div>
    </body>
</html>

Note: Be careful to add all the js files in the correct order, in my example, jQuery UI depends of jQuery, if I change the order of the files, I will see the next JavaScript error on the console (Firebug):

With my example you can´t see the different on the performance of using or not Head JS, to see the difference by yourself check the next links:

There are more cool stuff you can do with Head JS like:

JavaScript Organizer
Responsive Design / Media Queries
CSS Router
Browser Detection / Graceful Degradation
Dynamic CSS
CSS3 Feature Detection
JavaScript Feature Detection
HTML5 Enabler

Here I show you one of them and in an easy way, feel free to visit the following links that I used to create this post:

I really hope you find this information useful.

Joaquin Arellano

carpe diem…

How to loading asynchronous JavaScript but execute it in order