diff --git a/README.textile b/README.textile index a4b326c..906662a 100644 --- a/README.textile +++ b/README.textile @@ -1,8 +1,7 @@ -h1. NBL.js 2.0 - a tiny non-blocking JavaScript lazy loader +h1. NBL.js 3.0 - a tiny non-blocking JavaScript/CSS/Image lazy loader -*GZipped*: 593 bytes -*Minified*: 977 bytes -*Single line*: 816 bytes +*GZipped*: 631 bytes +*Minified*: 1079 bytes *Compatibility*: Tested in Safari, Chrome, Firefox, IE6+, basically doing nothing too fancy. *Examples*: "http://berklee.github.com/nbl/example.html":http://berklee.github.com/nbl/example.html @@ -19,17 +18,22 @@ h3. Features * Load scripts asynchronously or in order, or any combination of both * Every script can have its own callback -* Trigger a callback on a user definable timeout period +* A callback for loading all items +* Can be mixed with your provided function for loading some data +* [TODO: Trigger a callback on a user definable timeout period] * Uses HTML5's data attribute for configuration, so load all scripts with one script-tag -* Also available as a single line for inclusion in your HTML page -* Less than 1kb! +* Very small code! h2. Usage Include NBL.js in your pages and let it dynamically load all your JavaScript files by simply including the following tag: -@@ +@@ This will do the following: @@ -39,17 +43,6 @@ This will do the following: * When jQuery has loaded, it will call the @jquery_loaded()@ function. * Finally, when Urchin has loaded, it will call the @urchin_loaded()@ function. -h3. 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. - -In the above example "jquery.lightbox.min.js" will become "jquerylightbox". If it has loaded successfully, @nbl.q.jquerylightbox@ will return true, otherwise you'll get the script element of the script you queried. - -When a script fails to load, NBL will fire the first defined function it encounters after a default timeout of 2500ms. In the above example that function is @jquery_loaded()@. If jQuery loads fine, but one of the plugins doesn't, the timeout will expire and call @jquery_loaded()@ once again, only this time it will provide the @nbl.q@ object as its only argument @e@. - -That way you can distinguish between a normal call and a timed out call, check out the example for more -information on this feature. - h2. Options NBL.js is rather flexible in its options, so let's dissect a few examples. @@ -62,55 +55,35 @@ This will simply load all three scripts in parallel. h3. Loading two scripts asynchronously, and two plugins asynchronously after the first script: -@[ [ 'script1.js', 'plugin1.js', 'plugin2.js' ], 'script2.js' ]@ +@[ {load:'script1.js', then:['plugin1.js', 'plugin2.js' ]}, 'script2.js' ]@ This will load @script1.js@ and @script2.js@ in parallel. After @script1.js@ has loaded, @plugin1.js@ and @plugin2.js@ will load in parallel. -When NBL.js encounters an array of scripts, it will immediately load the first script (@script1.js@ in -this case) and load the remaining scripts (@plugin1.js@ and @plugin2.js@) after completion. The -@plugin1.js@ and @plugin2.js@ scripts have a lower priority than the @script1.js@ and @script2.js@ -scripts and will be loaded after @script1.js@ completes. - h3. Loading four scripts in order: -@[ [ 'script1.js', [ 'script2.js', [ 'script3.js, 'script4.js ] ] ] ]@ +@{ load:'script1.js', then:{load:'script2.js', then:{load:'script3.js, then:'script4.js } } }@ -It's a bit crazy, but nesting the arrays like this will allow you to load all scripts sequentially. After -the first array with @script1.js@, NBL.js encounters a second array starting with @script2.js@, which it -will load after @script1.js@ has completed. - -After @script2.js@ completes, NBL.js will continue the iteration with the third array that starts with -@script3.js@, finally ending with loading @script4.js@ after @script3.js@ has completed. +It's a bit crazy, but nesting the objects like this will allow you to load all scripts sequentially. h3. Three scripts with their own callbacks: -@[ 'script1.js', function(e){ script1_callback(e) }, 'script2.js', function(){ script2_callback() }, 'script3.js', function(){ script3_callback() } ]@ - -The basic rule of callbacks is: declare the callback function directly after the script. - -In this example, the three scripts will load in parallel and upon completion of each script, the -corresponding callback will be called. In case of a timeout, the first defined function -(@script1_callback(e)@) will be called with @nbl.q@ as argument @e@ (as explained above). +```@[ {load:'script1.js', callback:function(e){ script1_callback(e) }}, + {load:'script2.js', callback:function(){ script2_callback() }}, + {load:'script3.js', callback:function(){ script3_callback() }} ]@``` h3. Two scripts and a plugin with their own callbacks: -@[ [ 'script1.js', 'plugin1.js', function(){ plugin1_callback() } ], function(e){ script1_callback(e) }, 'script2.js', function(){ script2_callback() } ]@ - -Following the basic rule of callbacks as mentioned above, we place the callback function for @script1.js@ -*outside* the array that contains @script1.js@ and @plugin1.js@, since to NBL.js @script1.js@ and -@script2.js@ are on equal footing, the callbacks for both must be placed in the main array. - -h3. Defining a global timeout function and a new timeout: +```@[ { load:'script1.js', + then: {load:'plugin1.js', callback:function(){ plugin1_callback() } }, + callback: function(e){ script1_callback(e) } + }, + {load:'script2.js', callback:function(){ script2_callback() }} ]@``` -@[ 3200, function(e){ global_timeout(e) }, 'script1.js', function(){ script1_callback() }, 'script2.js', function(){ script2_callback() } ]@ +h3. [TODO:] Defining a global timeout function and a new timeout: -First off, by specifying a number anywhere in the options, NBL.js will assume you want to change the timeout -from the default 2500ms to the provided number. Second, by putting a function before any scripts, it will -define it as the global timeout function. +@{ load: ['script1.js', 'script2.js', 'script3.js' ], timeout: function(){global_timeout()} }{@ -In this case @script1_callback()@ and @script2_callback()@ will be called when @script1.js@ and @script2.js@ -are finished loading. And in case of an error, @global_timeout()@ will be called after approximately 3500ms. h2. Alternative usage diff --git a/nbl.js b/nbl.js deleted file mode 100644 index e0fc0ab..0000000 --- a/nbl.js +++ /dev/null @@ -1,94 +0,0 @@ -/* - * NBL: Non Blocking Lazy loader v2.0 - * Copyright (c) 2010 Berklee. - * Licensed under the MIT license. - * - * Date: 2010-09-24 - */ -this.nbl = { - c: document, - q: {}, // The dictionary that will hold the script-queue - n: null, - - // The loader function - // - // Called with an array, it will interpret the options array - // Called without an array it will try to load the options from the script-tag's data-nbl attribute - l: function(a) { - var b, c, x, y, z, s, l, i = j = 0, m = this; m.h = m.c.head || m.c.body || m.c.documentElement || m.h; - - // The timeout counter, counts backwards every 50ms from 50 ticks (50*50=2500ms by default) - if (!m.i) { - m.s = m.f = 0; // Reset counters: completed, created, timeout function - m.i = setInterval( - function() { - // If the timeout counter dips below zero, or the amount of completed scripts equals the amount - // of created script-tags, we can clear the interval - if (m.o < 0 || m.s == 0) { - m.i = clearInterval(m.i); - // If the amount of completed scripts is smaller than the amount of created script-tags, - // and there is a timeout function available, call it with the current script-queue. - (m.s > 0 && m.f) && m.f(m.q) - } - m.o-- - }, - m.o = 50 // Set the initial ticks at 50, as well as the interval at 50ms - ); - } - - // If no arguments were given (a == l, which is null), try to load the options from the script tag - if (a == m.n) { - s = m.c.getElementsByTagName("script"); // Get all script tags in the current document - while (j < s.length) { - if ((a = eval("("+s[j].getAttribute("data-nbl")+")")) && a) { // Check for the data-nbl attribute - m.h = s[j].parentNode; - break - } - j++ - } - } - - // If an options array was provided, proceed to interpret it - if (a&&a.shift) { - while (i < a.length) { // Loop through the options - b = a[i]; // Get the current element - c = a[i+1]; // Get the next element - x = 'function'; - y = typeof b; - z = typeof c; - l = (z == x) ? c : (y == x) ? b : m.n; // Check whether the current or next element is a function and store it - if (y == 'number') m.o = b/50; // If the current element is a number, set the timeout interval to this number/50 - // If the current element is a string, call this.a() with the string as a one-element array and the callback function l - if (y == 'string') m.a([b], l); - // If the current element is an array, call this.a() with a two-element array of the string and the next element - // as well as the callback function l - b.shift && m.a([b.shift(), b], l); - if (!m.f && l) m.f = l; // Store the function l as the timeout function if it hasn't been set yet - i++ - } - } - }, - a: function(u,l) { - var s, m = this, n = u[0].replace(/.+\/|\.min\.js|\.js|\?.+|\W/gi, ''); // Clean up the name of the script for storage in the queue - s = m.q[n] = m.c.createElement("script"); - s.setAttribute("src", u[0]); - // When this script completes loading, it will trigger a callback function consisting of two things: - // 1. It will call nbl.l() with the remaining items in u[1] (if there are any) - // 2. It will execute the function l (if it is a function) - s.onload = s.onreadystatechange = function(){ - var s = this, d = function(){ - var s = m, r = u[1]; - s.q[n] = true; // Set the entry for this script in the script-queue to true - r && s.l(r); // Call nbl.l() with the remaining elements of the original array - l && l(); // Call the callback function l - s.s-- - }; - if ( !s.readyState || /de|te/.test( s.readyState ) ) { - s.onload = s.onreadystatechange = m.n; d() // On completion execute the callback function as defined above - } - }; - m.s++; - m.h.appendChild(s) // Add the script to the document - } -}; -nbl.l() diff --git a/nbl.min.js b/nbl.min.js deleted file mode 100644 index 1f5acdc..0000000 --- a/nbl.min.js +++ /dev/null @@ -1 +0,0 @@ -this.nbl={c:document,q:{},n:null,l:function(a){var b,c,x,y,z,s,l,i=j=0,m=this;m.h=m.c.head||m.c.body||m.c.documentElement||m.h,m.i||(m.s=m.f=0,m.i=setInterval(function(){if(m.o<0||m.s==0)m.i=clearInterval(m.i),m.s>0&&m.f&&m.f(m.q);m.o--},m.o=50));if(a==m.n){s=m.c.getElementsByTagName("script");while(j 0 && m.f) && m.f(m.q) - } - m.o-- - }, - m.o = 50 // Set the initial ticks at 50, as well as the interval at 50ms - ); - } - // If no arguments were given (a == l, which is null), try to load the options from the script tag - if (a == m.n) { - s = m.c.getElementsByTagName("script"); // Get all script tags in the current document - while (j < s.length) { - if ((a = eval("("+s[j].getAttribute("data-nbl")+")")) && a) { // Check for the data-nbl attribute - m.h = s[j].parentNode; - break +// ==ClosureCompiler== +// @output_file_name default.js +// @compilation_level ADVANCED_OPTIMIZATIONS +// ==/ClosureCompiler== + +/*jslint browser: true, white: true, eqeq: true, plusplus: true */ + +/** + * @constructor + */ +(function (document) { + "use strict"; + var loadedScripts = {}, // The dictionary that will hold the loaded script + noop = function(){}, + addScript, loadItems, + head = document.head || document.body || document.documentElement, + // The loader function + // + // Called with an array, it will interpret the options array + // Called without an array it will try to load the options from the script-tag's data-nbl attribute + /** + * @param {*=} params + * @param {*=} callback + */ + load = function(params, callback) { + //var cur_element, next_element, function_type, cur_type, next_type, scripts, handler, i=0,j = 0; + + // The timeout counter, counts backwards every 50ms from 50 ticks (50*50=2500ms by default) + /*if (!timeout) { + pendingCount = timeoutHandler = 0; // Reset counters: completed, created, timeout function + timeout = setInterval( + function() { + // If the timeout counter dips below zero, or the amount of completed scripts equals the amount + // of created script-tags, we can clear the interval + if (ticks < 0 || !pendingCount) { + timeout = clearInterval(timeout); + // If the amount of completed scripts is smaller than the amount of created script-tags, + // and there is a timeout function available, call it with the current script-queue. + if(pendingCount > 0 && timeoutHandler) {timeoutHandler(loadedScripts);} + } + ticks--; + }, + ticks = 50 // Set the initial ticks at 50, as well as the interval at 50ms + ); + }*/ + + // If no arguments were given (a == l, which is null), try to load the options from the script tag + if (!params) { + var j=0, scripts = document.getElementsByTagName("script"); // Get all script tags in the current document + while (j < scripts.length) { + /*jslint evil:true */ + params = eval("("+scripts[j].getAttribute("data-nbl")+")"); + if (params) { // Check for the data-nbl attribute + head = scripts[j].parentNode; + break; + } + j++; } - j++ } - } - - // If an options array was provided, proceed to interpret it - if (a&&a.shift) { - while (i < a.length) { // Loop through the options - b = a[i]; // Get the current element - c = a[i+1]; // Get the next element - x = 'function'; - y = typeof b; - z = typeof c; - l = (z == x) ? c : (y == x) ? b : m.n; // Check whether the current or next element is a function and store it - if (y == 'number') m.o = b/50; // If the current element is a number, set the timeout interval to this number/50 - // If the current element is a string, call this.a() with the string as a one-element array and the callback function l - if (y == 'string') m.a([b], l); - // If the current element is an array, call this.a() with a two-element array of the string and the next element - // as well as the callback function l - b.shift && m.a([b.shift(), b], l); - if (!m.f && l) m.f = l; // Store the function l as the timeout function if it hasn't been set yet - i++ + if (params) { + loadItems(params, callback||noop); } - } - }, - a: function(u,l) { - var s, t, m = this, n = u[0].replace(/.+\/|\.min\.js|\.js|\?.+|\W/gi, ''), k = {js: {t: "script", a: "src"}, css: {t: "link", a: "href", r: "stylesheet"}, "i": {t: "img", a: "src"}}; // Clean up the name of the script for storage in the queue - t = u[0].match(/\.([cjs]{2,4})$|\?.+/i); t = (t) ? t[1] : "i"; - s = m.q[n] = m.c.createElement(k[t].t); - s.setAttribute(k[t].a, u[0]); - // Fix: CSS links do not fire onload events - Richard Lopes - // Images do. Limitation: no callback function possible after CSS loads - if (k[t].r) s.setAttribute("rel", k[t].r); - else { - // When this script completes loading, it will trigger a callback function consisting of two things: - // 1. It will call nbl.l() with the remaining items in u[1] (if there are any) - // 2. It will execute the function l (if it is a function) - s.onload = s.onreadystatechange = function(){ - var s = this, d = function(){ - var s = m, r = u[1]; - s.q[n] = true; // Set the entry for this script in the script-queue to true - r && s.l(r); // Call nbl.l() with the remaining elements of the original array - l && l(); // Call the callback function l - s.s-- - }; - if ( !s.readyState || /de|te/.test( s.readyState ) ) { - s.onload = s.onreadystatechange = m.n; d() // On completion execute the callback function as defined above + + // If an options array was provided, proceed to interpret it + /*if (params && params.shift) { + while (i < params.length) { // Loop through the options + cur_element = params[i]; // Get the current element + next_element = params[i+1]; // Get the next element + function_type = 'function'; + cur_type = typeof cur_element; + next_type = typeof next_element; + handler = (next_type == function_type) ? + next_element : + (cur_type == function_type) ? cur_element : 0; // Check whether the current or next element is a function and store it + if (cur_type == 'number') {ticks = cur_element/50;} // If the current element is a number, set the timeout interval to this number/50 + // If the current element is a string, call this.addScripts() with the string as a one-element array and the callback function l + if (cur_type == 'string') {addScripts([cur_element], handler);} + // If the current element is an array, call this.addScripts() with a two-element array of the string and the next element + // as well as the callback function l + if(cur_element.shift) { addScripts([cur_element.shift(), cur_element], handler);} + + if (!timeoutHandler && handler) {timeoutHandler = handler;} // Store the function l as the timeout function if it hasn't been set yet + i++; + } + }*/ + }; + loadItems = function(item, callback){ + var itemType = typeof item; + if (itemType == 'string') { + addScript(item, callback); + } else if (item instanceof Array) { // list + /*jslint vars: true */ + var i, pending = item.length, + loaded = function(){ + if (!--pending) { + callback(); + } + }; + for (i=0; i0&&m.f&&m.f(m.q);m.o--},m.o=50));if(a==m.n){s=m.c.getElementsByTagName("script");while(j 0 && timeoutHandler) {timeoutHandler(loadedScripts);} + } + ticks--; + }, + ticks = 50 // Set the initial ticks at 50, as well as the interval at 50ms + ); + }*/ + + if (params) { + loadItems(params, callback||noop); + } + + // If an options array was provided, proceed to interpret it + /*if (params && params.shift) { + while (i < params.length) { // Loop through the options + cur_element = params[i]; // Get the current element + next_element = params[i+1]; // Get the next element + function_type = 'function'; + cur_type = typeof cur_element; + next_type = typeof next_element; + handler = (next_type == function_type) ? + next_element : + (cur_type == function_type) ? cur_element : 0; // Check whether the current or next element is a function and store it + if (cur_type == 'number') {ticks = cur_element/50;} // If the current element is a number, set the timeout interval to this number/50 + // If the current element is a string, call this.addScripts() with the string as a one-element array and the callback function l + if (cur_type == 'string') {addScripts([cur_element], handler);} + // If the current element is an array, call this.addScripts() with a two-element array of the string and the next element + // as well as the callback function l + if(cur_element.shift) { addScripts([cur_element.shift(), cur_element], handler);} + + if (!timeoutHandler && handler) {timeoutHandler = handler;} // Store the function l as the timeout function if it hasn't been set yet + i++; + } + }*/ + }; + loadItems = function(item, callback){ + var itemType = typeof item; + if (itemType == 'string') { + addScript(item, callback); + } else if (item instanceof Array) { // list + /*jslint vars: true */ + var i, pending = item.length, + loaded = function(){ + if (!--pending) { + callback(); + } + }; + for (i=0; i0&&m.f&&m.f(m.q);m.o--},m.o=50));if(a&&a.shift)while(i - - - - NBL.js 2.0 — a tiny non-blocking JavaScript lazy loader - - - - - -
-

NBL.js 2.0

-

(a tiny non-blocking JavaScript lazy loader)

- Fork me on GitHub -
- -
-
    -
  • GZipped: 593 bytes
    • -
  • Minified: 977 bytes
    • -
  • Single line: 816 bytes
    • -
-
- -
-

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:

-
    -
  • Load scripts asynchronously or in order, or any combination of both
    • -
  • Every script can have its own callback
    • -
  • Trigger a callback on a user definable timeout period
    • -
  • Uses HTML5's data attribute for configuration, so load all scripts with one script-tag
    • -
  • Also available as a single line for inclusion in your HTML page
    • -
  • Tested in Safari, Chrome, Firefox, IE6+, basically doing nothing too fancy.
    • -
  • Less than 1kb!
    • -
- -
- -
-

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. -
  2. It will load the Urchin script from Google Analytics.
    3. -
  3. After jQuery has loaded, it will start loading the jQuery plugins as defined after jQuery in parallel.
    4. -
  4. When jQuery has loaded, it will call the jquery_loaded() function.
    5. -
  5. Finally, when Urchin has loaded, it will call the urchin_loaded() function.
    6. -
-

- -

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. -

-

- In the above example "jquery.lightbox.min.js" will become "jquerylightbox". If it has loaded successfully, - nbl.q.jquerylightbox will return true, otherwise you'll get the script element of the script you queried. -

-

- When a script fails to load, NBL will fire the first defined function it encounters after a default timeout of 2500ms. - In the above example that function is jquery_loaded(). If jQuery loads fine, but one of the plugins doesn't, - the timeout will expire and call jquery_loaded() once again, only this time it will provide the nbl.q - object as its only argument e. -

-

- That way you can distinguish between a normal call and a timed out call, check out the - examples for more information on this feature. -

- -

Options

- -

- NBL.js is rather flexible in its options, so let's dissect a few examples. -

- -

Loading three scripts asynchronously:

- -

[ 'script1.js', 'script2.js', 'script3.js' ]

- -

This will simply load all three scripts in parallel.

- -

Loading two scripts asynchronously, and two plugins asynchronously after the first script:

- -

[ [ 'script1.js', 'plugin1.js', 'plugin2.js' ], 'script2.js' ]

- -

This will load script1.js and script2.js in parallel. After script1.js - has loaded, plugin1.js and plugin2.js will load in parallel.

- -

When NBL.js encounters an array of scripts, it will immediately load the first script (script1.js - in this case) and load the remaining scripts (plugin1.js and plugin2.js) after - completion. The plugin1.js and plugin2.js scripts have a lower priority than the - script1.js and script2.js scripts and will be loaded after script1.js - completes.

- -

Loading four scripts in order:

- -

[ [ 'script1.js', [ 'script2.js', [ 'script3.js, 'script4.js ] ] ] ]

- -

It's a bit crazy, but nesting the arrays like this will allow you to load all scripts sequentially. After - the first array with script1.js, NBL.js encounters a second array starting with script2.js, - which it will load after script1.js has completed.

- -

After script2.js completes, NBL.js will continue the iteration with the third array that starts with - script3.js, finally ending with loading script4.js after script3.js has - completed.

- -

Three scripts with their own callbacks:

- -

[ 'script1.js', function(e){ script1_callback(e) }, 'script2.js', function(){ script2_callback() }, 'script3.js', function(){ script3_callback() } ]

- -

The basic rule of callbacks is: declare the callback function directly after the script.

- -

In this example, the three scripts will load in parallel and upon completion of each script, the - corresponding callback will be called. In case of a timeout, the first defined function - (script1_callback(e)) will be called with nbl.q as argument e (as explained above).

- -

Two scripts and a plugin with their own callbacks:

- -

[ [ 'script1.js', 'plugin1.js', function(){ plugin1_callback() } ], function(e){ script1_callback(e) }, 'script2.js', function(){ script2_callback() } ]

- -

Following the basic rule of callbacks as mentioned above, we place the callback function for script1.js - outside the array that contains script1.js and plugin1.js, since to NBL.js - script1.js and script2.js are on equal footing, the callbacks for both must be placed in the main array.

- -

Defining a global timeout function and a new timeout:

- -

[ 3200, function(e){ global_timeout(e) }, 'script1.js', function(){ script1_callback() }, 'script2.js', function(){ script2_callback() } ]

- -

First off, by specifying a number anywhere in the options, NBL.js will assume you want to change the timeout from the - default 2500ms to the provided number. Second, by putting a function before any scripts, it will define it as the global - timeout function.

- -

In this case script1_callback() and script2_callback() will be called when script1.js - and script2.js are finished loading. And in case of an error, global_timeout() will be called after - approximately 3500ms.

- -

Alternative usage

- -

- If you prefer you can choose to simply include NBL.js in a single line in your HTML pages. This way you can - save a HTTP-call from the browser, and it will only add 882 bytes to your HTML page. Simply include the code - in nbl.single.js into a <script> tag at the end of your page, and replace - ['your', 'scripts', 'here'] with your own options. -

- -

- You can't use the data-nbl attribute of the script tag if you use this method. -

- -

Final note

- -

- All options are case-sensitive, if you include a file called urCHin.js, the corresponding - nbl.q object will be nbl.q.urCHin. I advise you to simply use lowercase for all options. -

- -

- If you do not specify any options in the script tag, NBL.js will instantiate the default nbl object - and will do nothing. You will have to do a manual nbl.l( [ 'your', 'options', 'here' ] ). -

- -

- You can find more examples in the included examples. -

- -

- I hope you find NBL.js useful, thanks for reading this! -

- -

- Berklee -

- -

- (@Berklee on Twitter or feedback at berkl.ee) -

- -

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. -

- -

MIT License

- - 
-	Copyright (c) 2009-2011 Berklee
-
-	Permission is hereby granted, free of charge, to any person obtaining a copy
-	of this software and associated documentation files (the "Software"), to deal
-	in the Software without restriction, including without limitation the rights
-	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-	copies of the Software, and to permit persons to whom the Software is
-	furnished to do so, subject to the following conditions:
-
-	The above copyright notice and this permission notice shall be included in
-	all copies or substantial portions of the Software.
-
-	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-	THE SOFTWARE.
-
-
- -
- - - \ No newline at end of file