Load.allthethings

A simple JavaScript library to preload resources as they are needed

View project onGitHub

Load.allTheThings

Load.allTheThings

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:

Load.allTheThings()


Things you can load


Options

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

Images

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

Becomes:

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


Fonts

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


Stylesheets

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.


Scripts

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.


HTML

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

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
          




The API

options.thingsToLoad

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.


options.within

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'


options.progressId

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

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


options.progressBarId

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'
          


options.thingsId

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


options.thingsLoadedId

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 )
}
          


options.onComplete

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.