HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」

HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。

• デモ (通常のimgタグ)
• デモ (LoadManager.jsを使用)

デモの違いとは

前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。

▼前者のデモ

▼後者のデモ

後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。

HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。FlashだとActionScriptで画像読み込み管理をおこなって、こういう見栄えには気を使いますよね？

また以前、案件でアニメーションコンテンツを作ったときに、プリローディングを行なっていないとアニメーションの途中で、画像がインターレース式に読み込まれて 演出が台無しということがありました。そういうこともあり、HTML5でもプリローディングの制御が必要ではないかと考えるようになりました。

読み込み管理ができるJSライブラリ「LoadManager.js」

前置きが長くなりましたが、そこで複数の画像読み込みが管理できるJSライブラリ「LoadManager.js」を作成し公開しました。複数の画像素材をまとめて読み込み、柔軟に処理ができるというライブラリです。Flash(ActionScript 3.0)で言うとBulkLoaderというライブラリの役割に近いでしょうか。「HTML5演出に最適」と本記事のタイトルにしていますが、HTML4でもXHTMLでも動作します。

• LoadManager.js
• ドキュメント
• Google Codeでのプロジェクトページ
• サンプル(ZIP)

ライセンスは商用でも個人でも扱いやすいように、MITライセンスとしました。無料で断りなく使って頂いて大丈夫です。

LoadManager.jsの使い方

まずはLoadManager.jsをHTMLに読み込みます。ライブラリの依存関係はないので、単体で読み込んで大丈夫です。

<script src="LoadManager.js"></script>

利用する場合は、次のようにスクリプトを記述します。

// インスタンスを作成
var manager = new LoadManager();

// 読み込みたい画像を登録
manager.add("imgs/hoge.jpg");
manager.add("imgs/piyo.jpg");
manager.add("imgs/moja.jpg");

// 読み込み進行中
manager.onProgress = function (event) {
	// パーセンテージが取得できる
	console.log(manager.getPercent());
};

// 読み込み完了
manager.onComplete = function(event){
	alert("読み込み完了")
}

manager.start();

その他の機能はドキュメントとして公開していますので、そちらを参考ください。

デモの紹介

これ以外にもデモが用意されていますので、そちらも確認ください。

• シンプルな実装例
  (実装のためのコードが最小のデモ)
• エラー管理のサンプル
  (わざと画像読み込みエラーが起きるようになっているが、読み込まれなかった部分に「ERROR」という表示を出している)
• 同時接続数を最小にしたサンプル
  (直列読み込みとして挙動させることも可能です。読み込み時間が延びますが)

▼同時接続数を低くした場合、読み込み時間はかかるが先頭から順番に表示させるという演出ができる

▼同時接続数がデフォルト(6接続)の場合、トータルでの読み込み時間を短縮できる

テクニックだけではなく、Flashデベロッパーが育んできた美意識みたいなものは、HTML5にも活かしたいですよね。

関連記事

• HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」
• HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門
• HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト
• CanvasタグとJavaScriptで3Dのデモを作ってみました
• Yahoo! Creative Award 2011でHTML5 賞を頂きました