A simple asset preloader.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Fetch - A simple asset preloader

Loading of assets with fetch is done with loader functions. Fetch has two loaders included:

  • script - Used for loading scripts
  • image - Used for loading images

Writing your own loaders enables you to load just about anything, in any way you want to:

Fetch.loader('sound',function (url, callback) {
    // We'll see where the url param comes from in a moment
    var a = new Audio();
    a.src = url;

    // The callback param is a function that should 
    // be called when this particullar asset is loaded
    a.addEventListener('canplaythrough', callback, false);

    // Returning the asset will allow us to use it later
    return a;

The loading of assets is triggered thusly:

    'sound': [  // name of the loader to use
        'sounds/bark.ogg',  // path to the asset
        'sounds/meow.ogg'   // These are passed to the loader

Once assets have been loaded, they will need to be worked with. Accessing assets is as easy as:


If we were to use the sound example, our code would look like this:

// Returns an Audio object, ready to be played

You will probably want to display some sort of progress to the user (think GMail).

Fetch.on('update', function ( progress ) {
    // progress is a percent value, eg: .59 for 59%
    $('#progress').width( progress * 500 );

You can be notified when all the assets are done loading and ready to be used.

Fetch.on('done', function () {
    // Launch your code here

If you ever need it, calling Fetch.reset will reset Fetch to its original state.

Check out demo.html for a complete example.

Copyright (c) 2012 Ethan Ransom. MIT Licensed.