NBL.js 2.0

(a tiny non-blocking JavaScript lazy loader)

Fork me on GitHub

Home   —   Examples   —   Documentation

What is NBL.js?

NBL.js is a tiny script that will make your HTML pages load faster by loading all your JavaScript files asynchronously (in parallel) with the rest of your page. Normally if you include two or three scripts in your page, the browser will wait for them to be executed before your page is shown.

By using NBL.js the browser can start showing the HTML while loading and executing the scripts, resulting in a faster, more responsive website. All in less than 1kb! Check out some examples.

Features:

Usage

Include NBL.js in your pages and let it dynamically load all your JavaScript files by simply including the following tag:

<script src="nbl.js" data-nbl="[ [ 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', 'jquery.lightbox.min.js', 'jquery.carousel.min.js' ], function(e){ jquery_loaded(e) }, 'http://www.google-analytics.com/urchin.js', function(){ urchin_loaded() } ]"></script>

This will do the following:

  1. It will load the latest version of jQuery.
  2. It will load the Urchin script from Google Analytics.
  3. After jQuery has loaded, it will start loading the jQuery plugins as defined after jQuery in parallel.
  4. When jQuery has loaded, it will call the jquery_loaded() function.
  5. Finally, when Urchin has loaded, it will call the urchin_loaded() function.

Verifying the results

After NBL.js has done its job you can verify a few things through the global nbl object. Every script will be placed in the nbl.q object, referred to by the filename of the script minus the ".js" or .min.js" extension or any non-word characters.

For an overview of all options, please refer to the documentation.

Examples

I've put together a few examples here. For more information, please refer to the documentation

NBL Plus: support for images and CSS *updated*

GitHub user Knowlecules mailed me with modifications to preload CSS and images using NBL.js. I've incorporated that code into @nbl.plus.js@ (and @nbl.plus.min.js@). Thanks to some additional bug squashing by Richard Lopes, the latest version of NBL Plus is now better than ever! Clocking in at 1154 bytes for the minified version and 694 bytes for the gzipped one, there's no reason not to use NBL Plus for your asynchronous media loading needs.

Acknowledgements

Thanks to Ajaxian for featuring NBL.js v1 on 30 November 2009, right next to LABjs, a similar library by Steve Souders and Kyle Simpson. Steve Souders' research into dynamic script loading in particular was very helpful. Also helpful was Oleg Slobodskoi's xLazyLoader jQuery plugin, which also loads CSS and images dynamically, but requires jQuery to be loaded first.

NBL.js is licensed under the MIT License.

Contact

If you are unclear about something, feel free to contact me: feedback at berkl.ee or @Berklee on Twitter.



Home   —   Examples   —   Documentation


Homepage: http://berklee.github.com/nbl/   —   GitHub: http://github.com/berklee/nbl/