public void Crafty.load(Object assets, Function onLoad[, Function onProgress[, Function onError]])

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


Callback when the assets are loaded


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


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


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"boop"); //Play the audio file
        Crafty.e('2D, DOM, lazycat'); // create entity with sprite

    function(e) { //progress

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