Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using Labjs in Place of Head.js

DZone's Guide to

Using Labjs in Place of Head.js

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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.

 

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}