PreloadJSで画像を読み込む

PreloadJSとは

PreloadJSとは、外部ファイル（画像・音声・JSONなど）を読み込むライブラリ。

PreloadJSについての詳細はこの記事が分かりやすい。
PreloadJSで「悩ませないローディング」の作り方

PreloadJSで何ができるか

読み込み状況をイベントで監視して、読み込み率（0.0〜1.0）を取得することができる。
よって、ローディングアニメーションの作成などに利用される。

PreloadJSを使用して、画像の読み込み、DOMに反映までのプロセスをメモ。

PreloadJSライブラリを読み込む

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

LoadQueueクラスのインスタンスを生成

var preload = new createjs.LoadQueue();

読み込み結果をDOMに反映

イベントリスナーで画像ファイルを読み込み次第、handleFileComplete関数を実行。
body要素に読み込み結果を反映。

preload.addEventListener('fileload', handleFileComplete);
preload.loadFile('circle01.png');

function handleFileComplete(event){
  $('body').append(event.result);
}