PreloadJS #CreateJS

PreloadJS v0.3.0 API Documentation : PreloadJS
http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html

LoadQueue Class
http://www.createjs.com/Docs/PreloadJS/classes/LoadQueue.html

▼読み込んでとりあえず配置

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>createjs</title>

<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>

<script>
(function(window) {
  var _queue;

  // 読み込み完了
  function handleComplete() {
    // 読み込んだアイテムを配置
    var image = _queue.getResult("myImage");
    document.body.appendChild(image);
  }

  // 読み込み開始
  function load() {
    _queue = new createjs.LoadQueue(false);
    _queue.addEventListener("complete", handleComplete);
    _queue.loadManifest([
        {id: "myImage", src:"http://www.createjs.com/images/product-icons.png"}
    ]);
  }

  window.addEventListener("load", function(e) {
    window.removeEventListener("load", arguments.callee, false);

    // 読み込み開始
    load();

  }, false);

}(window));
</script>

</head>
<body>

</body>
</html>

▼各イベント

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>createjs</title>

<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>

<script>
(function(window) {
  var _queue;

  // 全て読み込み完了
  function _completeHandler(event) {
    console.log(event.type, event);
  }
  // エラー
  function _errorHandler(event) {
    console.log(event.type, event);
  }

  // ファイルの読み込み完了
  function _fileloadHandler(event) {
    console.log(event.type, event);
    var item = event.item; // A reference to the item that was passed in
    var type = item.type;

    // Add any images to the page body.
    if (type == createjs.LoadQueue.IMAGE) {
        document.body.appendChild(event.result);
    }
  }

  // ファイル読み込み中
  function _fileprogressHandler(event) {
    //console.log(event.type, event);
  }

  // 読み込み中
  function _progressHandler(event) {
    console.log(event.type, event);
  }
  // 読み込み開始
  function _loadStartHandler(event) {
    console.log(event.type, event);
  }


  // 読み込み開始
  function load() {

    _queue = new createjs.LoadQueue(false);
    _queue.addEventListener("complete", _completeHandler);
    _queue.addEventListener("error", _errorHandler);
    _queue.addEventListener("fileload", _fileloadHandler);
    _queue.addEventListener("fileprogress", _fileprogressHandler);
    _queue.addEventListener("loadStart", _loadStartHandler);
    _queue.addEventListener("progress", _progressHandler);

    _queue.loadManifest([
        {id: "myImage1", src:"http://www.createjs.com/images/product-icons.png"},
        {id: "myImage2", src:"http://www.createjs.com/images/product-icons.png"}
    ]);
  }

  window.addEventListener("load", function(e) {
    window.removeEventListener("load", arguments.callee, false);

    // 読み込み開始
    load();

  }, false);

}(window));
</script>

</head>
<body>

</body>
</html>

PreloadJSはデフォルトではXHRでファイルを読み込もうとするから
別ドメインの画像などを読み込もうとすると、
JavaScriptのクロスドメイン制約によってするとエラーになってしまうとか。

外部ドメインの画像などをリクエストする場合は、LoadQueueクラスにfalseを渡す。

var preload = new createjs.LoadQueue(false);

▼参考
CreateJSで遊んでみる 3日目 PreloadJS | WebDelog
http://webdelog.info/2013/03/web/javascript/preloadjs/