PreloadJS Documentation

In this version of PreloadJS, all class definitions are contained within the createjs namespace by default. Instead of instantiating classes directly (e.g., new PreloadJS()), you must access them through the namespace (e.g., new createjs.LoadQueue()).

var bar = new createjs.LoadQueue();

To remove the namespace entirely and make the libraries compatible with legacy content (such as Flash Pro Toolkit output for CreateJS v1.0), assign window to the createjs variable before loading the libraries. This causes the classes to be defined directly on the global window object.

<script>
var createjs = window; // sets window as the createjs namespace
</script>
<script src="easeljs.js"></script>

If you are serving images or other assets from a different domain than your application, you must configure cross-origin headers on the asset server. This allows assets to be loaded with the crossOrigin="Anonymous" attribute.

To do this on a Linux/Unix server, use the contents of the provided sample.htaccess file. You can either rename this file to .htaccess in your asset directory or append its contents to your existing .htaccess file.

To benefit from faster load times and shared caching across sites, you can link to the PreloadJS libraries hosted on the CreateJS CDN instead of hosting them locally.

http://code.createjs.com/

If you want to avoid typing the full createjs prefix, you can create a shortcut by assigning the createjs object to a different variable after the libraries have loaded.

<script src="easeljs.js"></script>
<script>
var c = createjs; // creates a reference to the createjs namespace in "c"
var foo = new c.Shape();
</script>

The ManifestLoader is used to load assets defined in a JSON manifest. A manifest is a JSON object with a manifest property containing an array of items. Items can be simple strings (paths) or objects specifying src, id, type, or callback (for JSONP).

When a ManifestLoader completes, the items it loaded are inherited by the parent loader (e.g., a LoadQueue), making them directly accessible.

Note: To avoid conflicts with higher-priority loaders like JSONLoader, you must explicitly set the type property of your manifest items to createjs.Types.MANIFEST.

{
  "path": "assets/",
  "manifest": [
    "image.png",
    {"src": "image2.png", "id":"image2"},
    {"src": "sub-manifest.json", "type":"manifest", "callback":"jsonCallback"}
  ]
}

To preload assets, instantiate a createjs.LoadQueue. You can listen for the fileload event to handle individual files as they complete. Use loadFile() to start loading a specific file URL.

var queue = new createjs.LoadQueue(false);
queue.on("fileload", handleFileComplete);
queue.loadFile('http://createjs.com/assets/images/png/createjs-badge-dark.png');

function handleFileComplete(event) {
	document.body.appendChild(event.result);
}

The lib directory provides different versions of PreloadJS depending on your needs for stability, debugging, or deployment:

• For stable production use: Use preloadjs.js (unminified, for debugging) or preloadjs.min.js (minified, for deployment). These represent the most recent tagged release.
• For testing latest features: Use preloadjs-NEXT.js (unminified) or preloadjs-NEXT.min.js (minified). These contain the latest in-progress updates.

When using an AbstractLoader (or its subclasses like LoadQueue), you can monitor the loading progress of an individual item via the progress property (a value between 0 and 1) and the progress event.

var queue = new createjs.LoadQueue();
queue.loadFile("largeImage.png");
queue.on("progress", function(event) {
    console.log("Progress:", queue.progress, event.progress);
});

Use createjs.promote(subclass, prefix) to create aliases for superclass methods that were overridden in the subclass. This allows calling superclass methods via prefix_methodName (e.g., MySuperClass_draw) without using function.call, which improves performance. An alias for the constructor is also added as prefix_constructor.

function ClassA(name) {
    this.name = name;
}
ClassA.prototype.greet = function() {
    return "Hello " + this.name;
};

function ClassB(name, punctuation) {
    this.ClassA_constructor(name);
    this.punctuation = punctuation;
}
createjs.extend(ClassB, ClassA);
ClassB.prototype.greet = function() {
    return this.ClassA_greet() + this.punctuation;
};

createjs.promote(ClassB, "ClassA");

var foo = new ClassB("World", "!?!!");
console.log(foo.greet()); // Hello World!?!?!

You can add files to the queue individually or in bulk using manifests. Files are appended to the end of the active queue.

• Single file: Use loadFile() with a string path or an object.
• Multiple files/Manifests: Use loadManifest() with an array of files, a manifest definition object, or a path to a JSON manifest file.

If you pass false as the loadNow parameter (in methods that support it), the queue will pause. You can then call .load() to begin processing.