Edited at

PreloadJS

More than 5 years have passed since last update.

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/

http://qiita.com/katapad/items/c3567a8513e7cd550524