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
- Images (more info)
- Fonts (more info)
- Stylesheets (more info)
- Scripts (more info)
- HTML (more info)
- JSON (more info)
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.