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つかって表示させています。
よろしければ、ご参考までにどうぞ。