FlashからToolkit for CreateJSを使って書き出したCanvasですが、ローディングをつけたいなあと思って調べたときの備忘録。

javascriptの該当部分を下記のように。

javascript

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var manifest = [
		{src:"images/dummy01.png", id:"dummy01"},
		{src:"images/dummy02.png", id:"dummy02"},
		{src:"images/dummy03.png", id:"dummy03"}
	];

	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("progress", handleProgress);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
	function handleProgress(evt) {
		// 読み込み率を0.0~1.0で取得
		var progress = evt.loaded;
		var per = Math.round(progress * 100);
		document.getElementById("loading").innerHTML=per;
	}
}

html

<p><span id="loading">0</span>%</p>