API Documentation for: 1.0.0
Show:

PreloadJS Module

Defined in: PreloadJS:6

PreloadJS provides a consistent way to preload content for use in HTML applications. Preloading can be done using HTML tags, as well as XHR.

By default, PreloadJS will try and load content using XHR, since it provides better support for progress and completion events, however due to cross-domain issues, it may still be preferable to use tag-based loading instead. Note that some content requires XHR to work (plain text, web audio), and some requires tags (HTML audio). Note this is handled automatically where possible.

PreloadJS currently supports all modern browsers, and we have done our best to include support for most older browsers. If you find an issue with any specific OS/browser combination, please visit http://community.createjs.com/ and report it.

Getting Started

To get started, check out the LoadQueue class, which includes a quick overview of how to load files and process results.

Example

 var queue = new createjs.LoadQueue();
 queue.installPlugin(createjs.Sound);
 queue.on("complete", handleComplete, this);
 queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"});
 queue.loadManifest([
     {id: "myImage", src:"path/to/myImage.jpg"}
 ]);
 function handleComplete() {
     createjs.Sound.play("sound");
     var image = queue.getResult("myImage");
     document.body.appendChild(image);
 }

Important note on plugins: Plugins must be installed before items are added to the queue, otherwise they will not be processed, even if the load has not actually kicked off yet. Plugin functionality is handled when the items are added to the LoadQueue.

Browser Support

PreloadJS is partially supported in all browsers, and fully supported in all modern browsers. Known exceptions:

  • XHR loading of any content will not work in many older browsers (See a matrix here: http://caniuse.com/xhr2). In many cases, you can fall back on tag loading (images, audio, CSS, scripts, and SVG). Text and WebAudio will only work with XHR.
  • Some formats have poor support for complete events in IE 6, 7, and 8 (SVG, tag loading of scripts, XML/JSON)
  • Opera has poor support for SVG loading with XHR
  • CSS loading in Android and Safari will not work with tags (currently, a workaround is in progress)
  • Local loading is not permitted with XHR, which is required by some file formats. When testing local content use either a local server, or enable tag loading, which is supported for most formats. See setPreferXHR for more information.

Cross-domain Loading

Most content types can be loaded cross-domain, as long as the server supports CORS. PreloadJS also has internal support for images served from a CORS-enabled server, via the crossOrigin argument on the LoadQueue constructor. If set to a string value (such as "Anonymous"), the "crossOrigin" property of images generated by PreloadJS is set to that value. Please note that setting a crossOrigin value on an image that is served from a server without CORS will cause other errors. For more info on CORS, visit https://en.wikipedia.org/wiki/Cross-origin_resource_sharing.