A simple JavaScript library to preload resources as they are needed

View project onGitHub



Current build: beta v0.7.0 – 11 September, 2012

A simple JavaScript library to load resources as they are needed on your page with just one simple invocation:


Things you can load


There are a few options available to be passed into your loader. Read the API for more details on how to use.

options = {
    thingsToLoad: [ <list_of_things> ],
    within: <css_selector>,
    progressId: <element_ID>,
    progressBarID: <element_ID>,
    thingsId: <element_ID>,
    thingsLoadedId: <element_ID>,
    onError: <function>,
    onLoad: <function>,
    onComplete: <function>

Load.allTheThings( options )

The Markup


To have any image preload, simply change it's src to data-src. For example:

<img src="http://www.google.com/images/srpr/logo3w.png">


<img data-src="http://www.google.com/images/srpr/logo3w.png">


To fetch fonts, use the font element as follows:

<font data-family="My Family Name" data-src="media/myfont.ttf"></font>

Both the data-family and data-src are required attributes.

Once the font has loaded, all elements targeted with your CSS to have font-family: "My Family Name" will have your typeface.

PS: Yes, the font element has deprecated with HTML5 - but all browsers support it and that's why it's perfect (less elements to traverse through).


Loading stylesheets is similar to loading images. Just change the href to data-src. Example:

<link data-src="http://html5boilerplate.com/css/_normalize.css">

When the stylesheet is done loading, it is immediately applied to the page.


JavaScript files can also be loaded similarly. Example:

<script data-src="http://code.jquery.com/jquery-1.8.0.js"></script>

The script is immediately invoked once it is loaded.


To load HTML, specify a data-src to a section element where you want the content to be printed to. Example:

<section data-src="media/ajaxed_page.htm"></section>

Once the page has loaded, it will be inserted into this section element.


JSON data can be loaded through the code element. Example:

<code data-name="myJsonData" data-src="media/data.json"></code>

Both the data-name and data-src are required attributes.

Once the data has loaded, you can use the Load.getCached method to retrieve this data depending on the data-name you provided:

Load.getCached( 'myJsonData' )    // outputs your JSON data



An array of things you would like to load.

thingsToLoad: [ 'images', 'fonts', 'css', 'js', 'html', 'data' ]

By default, it will load all of the things. You can pick and choose the things you want to load and markup your document accordingly.

The data thing is for fetching JSON data. Once the loader has completed, a Load.getCached method is available to retrieve this stored JSON. More on this in the JSON section.


You can give context to your search of things to load with a CSS selector. By default, it will search the entire document. Example:

within: '#content'

// or
within: '.preload'

// or
within: 'section'


The ID of the element that will display the loading progress in numbers. Example:

<!-- the html -->
<span id="progress_count"></span>%
// the javascript
progressId: 'progress_count'


The ID of the element that will display as a progress bar. Example:

<!-- the html -->
Progress bar:
<div id="progress_bar"></div>
// the javascript
progressBarId: 'progress_bar'


The ID of the element that will display the total number of things there are to load. Similar format as needed for options.progressId.


The ID of the element that will display a live count on the number of things that have loaded. Similar format as needed for options.progressId.

options.onError and options.onLoad

options.onError is called if something goes wrong in loading any thing. options.onLoad is called as each individual thing is loaded. Example:

onError: function( thing, type ) {
    console.error( 'There was an error loading a thing of ' + type + '.', thing )
onLoad: function( thing, type ) {
    console.log( 'Done loading a thing of ' + type + '.', thing )


This is called when the loader has finished loading all the things.

options.onComplete = function() {
    alert( 'All the things have loaded!' )

This code is (c) Amsul Naeem, 2012 – Licensed under the MIT ("expat" flavor) license.