超初心者 PreloadJS入門 画像を表示させてみる。

CreateJSのひとつ、PreloadJSの入門について調べてみました。

PreloadJSとは?

画像, 音声, CSS, JS, XMLといった外部ファイルを先に読み込むことができるJavaScriptライブラリです。

外部ファイルとは、他のファイルを読み込むこと。

とかですね。

PreloadJSの魅力は、
外部ファイルを先に読み込むことができる部分
そして、読み込み状況のパーセンテージを表示することができる

です。

なので、読み込み中にあと何パーセントで読み込み完了するかが、わかります。

まずは、PreloadJSを使って画像を表示させてみましょう!

<html>

<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <script>
          $(function init(){
            // LoadQueueオブジェクトを作成します。オブジェクトとは、データ(属性)と機能(手続き)をひとかたまりにした実体
            var queue = new createjs.LoadQueue(false);

            //queueにidと読み込む画像を設定
            queue.loadFile({id:"chara",src:"http://jsrun.it/assets/u/H/j/W/uHjWj.png"});

            queue.addEventListener("fileload", view);

            function view(){

              $("body").prepend(queue.getResult("chara"));
            }
          });
  </script>
</head>
<body>
</body>
</html>

 

jqueryとcreatejsつかって表示させています。
よろしければ、ご参考までにどうぞ。