[JS]複数の画像を順番に読み込むライブラリ

複数の画像を順番に読み込むjavascriptライブラリをつくりました。
Flashでは当たり前の画像の読み込み処理を行うJSライブラリです。
読み込み開始や終了のイベントもあるので、画像の先読み、プリローダーとして使うのに便利だと思います。

デモはこちら。

使い方

<!DOCTYPE HTML>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8" />
	<title>imagesLoader.js</title>
	
	<!-- JS -->
	<script type="text/javascript" src="./js/imagesLoader.js"></script>
    <script type="text/javascript">
        var il = new ImageLoader();
		//配列で登録する
		il.add([
			"img/1.jpg",
			"img/2.jpg",
			"img/3.jpg"
        ]);
		
		//個別に登録する
		il.add("img/4.jpg");

		//読み込み開始
		il.start();

		//画像が読み込まれるたびに呼び出されます
		il.onPprogress = function(event) {
			console.log(event.data);
			//読み込み状態をパーセントで表示
			console.log(Math.floor(100 * event.loadedNum / il.imageList.length))
		}

		//すべての画像が読み込まれると呼び出されます
		il.onLoaded = function() {
			//画像はget関数で取得できます
			//引数は登録したときのパスです
			var img = il.get("img/32.jpg");
			console.log(img);
			
			//読み込んだすべての画像はloadedListに配列で保存されています。
			console.log(il.loadedList[0]); // [object HTMLImageElement]
			//delete関数で保持しているデータを消去できます
			il.delete();
			console.log(il.loadedList[0]); // undefined
		}
    </script>
</head>

<body>

</body>
</html>

サンプルのダウンロード

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation