NBL.js 2.0

(a tiny non-blocking JavaScript lazy loader)

Fork me on GitHub

Home   —   Examples   —   Documentation

Here are some examples that demonstrate how to use NBL.js in a page.

Example 1:

Loading 2 (or more) scripts asynchronously:


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

By including this script tag in the head element of this document, NBL.js will dynamically load jQuery from the first url and Urchin from the second url in parallel.

Result: loading…

The nbl_init_xmp1() function will fire when it has completed loading the second script or when the default timeout has been reached. If you change the position of the function in the options like this: 


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

Then nbl_init_xmp1() will fire when it has completed loading the first script. Basically, any function after a script url will be fired when that script has loaded successfully. You're free to declare a function after every script you load, but keep in mind only the first function you declare will fire in case of a timeout.

Example 2:

NBL is now resident, and we can load a new script at any time. Simply call:
nbl.l(['url', function(){nbl_init_xmp2()}]) and a new script shall be loaded. After completion the nbl_init_xmp2() function will fire.

Click here to add the jCaption jQuery plugin script to this page.

Result: click first…

A view of Shinjuku, Tokyo.

After you've clicked the link, the photo should now have a nice caption courtesy of the jCaption plugin.

Example 3:

Let's find out what happens when you specify a wrong url for a script. We're going to call nbl.l() with some new options, like this: 


nbl.l([ 3500, function(){nbl_init_xmp3()},
  'http://github.com/vitch/jquery-methods/raw/master/date.js',
  ['http://www.kelvinluck.com/…/jquery.datePicker.js', 'Non-existent URL']
]);

This will load a script with date extensions and two jQuery plugins, one date-picker and a non-existing one. Trying to load the second plugin should cause an error, let's find out:

Click here to load the date picker scripts.

Result: click first…

Alright, what happened here? First off, jQuery Date Picker and the Date script should load just fine. But Plugin 2 (the Non-existent URL) should fail to load immediately. This will cause NBL's timeout to go into effect, which we specified to be 3500ms. So the above results should come into view 3.5 seconds after clicking. Plugin 2 will return the script object with the faulty url still in its src attribute. Furthermore, the timeout function will be called with the nbl.q object as its argument e, indicating there were errors.

I'll wait for Date and Plugin 1 to have loaded before showing you the date-picker link. The link should appear here:

That's it!

That should cover the basics of NBL.js, I hope I was able to explain its use. If you are unclear about something, feel free to contact me: feedback at berkl.ee or @Berklee on Twitter.

Acknowledgements:

These examples use the following scripts:



Home   —   Examples   —   Documentation

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