Crafty.loader

src/loader.js#L142-225
public void Crafty.load(Object assets, Function onLoad[, Function onProgress[, Function onError]])
assets

Object JSON formatted (or JSON string), with assets to load (accepts sounds, images and sprites)

onLoad

Callback when the assets are loaded

onProgress

Callback when an asset is loaded. Contains information about assets loaded

onError

Callback when an asset fails to load

Preloader for all assets. Takes a JSON formatted object (or JSON string) of files and adds them to the Crafty.assets object, as well as setting sprites accordingly.

Format must follow the pattern shown in the example below, but it's not required to pass all "audio", "images" and "sprites" properties, only those you'll need. For example, if you don't need to preload sprites, you can omit that property.

By default, Crafty will assume all files are in the current path. For changing these, use the function Crafty.paths.

Files with suffixes in image_whitelist (case insensitive) will be loaded.

It's possible to pass the full file path(including protocol), instead of just the filename.ext, in case you want some asset to be loaded from another domain.

If Crafty.support.audio is true, files with the following suffixes mp3, wav, ogg and mp4 (case insensitive) can be loaded.

The onProgress function will be passed on object with information about the progress including how many assets loaded, total of all the assets to load and a percentage of the progress.

{ loaded: j, total: total, percent: (j / total * 100), src:src }

onError will be passed with the asset that couldn't load.

When onError is not provided, the onLoad is loaded even when some assets are not successfully loaded. Otherwise, onLoad will be called no matter whether there are errors or not.

Example

var assetsObj = {
    "audio": {
        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],
        "boop": "boop.wav",
        "slash": "slash.wav"
    },
    "images": ["badguy.bmp", "goodguy.png"],
    "sprites": {
        "animals.png": {
            "tile": 50,
            "tileh": 40,
            "map": { "ladybug": [0,0], "lazycat": [0,1], "ferociousdog": [0,2] }
            "paddingX": 5,
            "paddingY": 5,
            "paddingAroundBorder": 10
        },
        "vehicles.png": {
            "tile": 150,
            "tileh": 75,
            "map": { "car": [0,0], "truck": [0,1] }
        }
    },
};

Crafty.load(assetsObj, // preload assets
    function() { //when loaded
        Crafty.scene("main"); //go to main scene
        Crafty.audio.play("boop"); //Play the audio file
        Crafty.e('2D, DOM, lazycat'); // create entity with sprite
    },

    function(e) { //progress
    },

    function(e) { //uh oh, error loading
    }
);