Using Labjs in Place of Head.js
A couple of days ago I blogged about using Head.js to load in JavaScript assets to improve site performance. I like Head.js as unlike other solutions I've looked at it would work with my existing code base and didn't require AMD compatible JavaScript modules. Ryan Anklam commented that he'd seen an issue with Head.js where head.ready() doesn't always fire on IE9. I haven't seen this issue myself, but Ryan is much smarter than I am, particuarly when it comes to JavaScript. Ryan also pointed out that the Head.js project appears to be abandonware (you can read the thread on the github site). As an alternative Ryan suggested LABjs.
I thought I should rewrite my post but using LABjs as a drop in replacement. Before I continue I should point out that on the LABjs site states:
NOTE: LABjs just won't be actively developed for new features. But it will be maintained in case there are bugs found. It's still in use by lots of small and big sites, and more are adopting it every day. I still encourage people to choose its simpler path to script loading (as compared to AMD) if and when appropriate. I certainly use it on pretty much all my sites.
getify (Kyle Simpson)
Here is a simple example of using LABjs with inline JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prototype</title>
<link rel="stylesheet" href="assets/css/core.css">
<script type="text/javascript" src="js/html5shiv.js"></script>
<script type="text/javascript" src="js/LAB.js"></script>
<!-- load libraries -->
<script>
var labjs = $LAB
.script("//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js").wait()
.script("//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js")
.script("js/global.js");
</script>
</head>
<body>
<header class="row">
An Awesome Website
</header>
<section id="content">
<article>Really interesting stuff</article>
</section>
<!--- do something --->
<script>
labjs.wait(function(){
// make header pulsate 'coz we kool dawg
$('header').effect("pulsate", { times:3 }, 2000);
});
</script>
</body>
</html>As jQuery UI depends on jQuery, I've called the wait method so that jQuery UI isn't executed before jQuery is loaded. I've also had to include html5shiv.js file as unlike Head.js, LABjs is just a JavaScript loader.
Thanks to Ryan for his recommendation.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
