Over a million developers have joined DZone.

Using Labjs in Place of Head.js

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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">
  <meta charset="utf-8">
  <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 -->
  var labjs = $LAB

<header class="row">
  An Awesome Website
<section id="content">
  <article>Really interesting stuff</article>

<!--- do something --->
  // make header pulsate 'coz we kool dawg
  $('header').effect("pulsate", { times:3 }, 2000);


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.


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of John Whish, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}