Find me on: or Twitter

WLoad

Javascript Projects

WLoad (Inline JS Loader)


What is WLoad?

Is a tiny (~1kB minified) JS loader that was made to be used inline on a page for greatest speed by preventing the need to block on javascript requests.

Why was WLoad made?

When I was working on the javascript functionality of a new project, I wanted to make use of asynchronous loading. When using async, javascript files can load in any random order, and due to that I made a small hack of a script that would let me queue function calls till everything that was needed loaded. Quickly I found my small hack to be limiting and constantly needing tweaks depending on what changes I made, and so I started researching for existing JS loaders.

During my search, I found plenty of good loaders that were too large to include inline, and I was against having even one blocking script tag for a "boot strap". I also noticed that most of these loaders were more feature rich than I needed, and were catered to a wide array of use case scenerios that I found unnecessary. All I needed was a small loader that just did what you expect all of them to do, and nothing extra, and so I started reworking my hack into something that is Asynchronous Module Definition (AMD) compatibile in some degree.

Usage

wload() before using the loader

wload({definitions/mappings});

Before you can make use of the loader you must call the function "wload" with one paramater containing an object of definitions/mappings or an empty object {}.

Minimal Usage

wload({});

You can list as many definitions as you want in the object with the key being the module id, and the value being either a string or an array.

Array value = group definition

If the value is an array, it should contain a list of module id strings. This will allow you to define groups of required commonly used modules.

wload({'minimal':['jquery','siteui']});
String value = url

If the value is a string, it should be a url pointing to the resource that defines the module id. The url can either be absolute or relative to the current page.

wload({
	'jquery':'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', 
	'siteui':'/js/siteui.js'
});

define() for Modules

define(id, array of dependancies, factory callback function)

This function is used in modules/libraries (such as jQuery) to define itself to the loader, there by notifying all modules/code that is waiting for it as a dependancy.

Example:

define( "siteui", ["jquery"], function (jquery){ return new siteUI(jquery); } );

This example defines a "siteui" module that has jquery as its dependancy, and so it will not execute till jquery is defined.

require()

require(array of dependancies, callback function)

This function works like define() except for the fact that no module is defined for use elsewhere.

Example:

require(['jquery'], function($){
	$('a.toggle').click(function(){
		$('div.'+this.id).toggle();
	});
});

Dependancies

All dependancies passed to require() or define() must be contained in an array (ie: ['jquery','siteui']), and can be a relative or absolute url that will be dynamically loaded (currently only support js & css).

include()

include(module id or url)

Used to dynamically load js/css files on to the page

WLoad Download

WLoad (JS Loader) v0.0.3 : Uncompressed , Minified   ( Oct 8, 2013 )

As of v0.0.2 this script is 1,192 bytes minified (without the included notice) which amounts to approximately 700 bytes gzipped.

Changelog

v0.0.3 (July 8, 2014)

- fixed bug where js detection broke when a query string or hash tag was preset

v0.0.2 (Oct 8, 2013)

- fixed bug where modules are not loaded when a define call has a function that returns undefined

v0.0.1 (Feb 27, 2012)

- Initial release

BSD License

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

Neither the name of the author nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.