いろんな人が作ってると思いますが、JavaScriptで動的にイメージを読み込むときに使いそうなimgLoaderというライブラリ作りました。作りましたっていうほどではないけど…。FlashでいうLoaderみたいな感じで使います。
引数には、読み込む画像ソースとオプションで画像が読み込み完了したときに呼ばれるcompleteハンドラー指定などをつけてあげます。
実際に使う場合はこんな感じ。
var option = {
//読み込みに失敗したときに何回までリロードするか
MaxErrorCount:100,
//読み込みが完了したらこれが呼ばれます
complete:function(e){
//読み込んだイメージをDOMにくわえる
$("body").append(e.target);
//読み込んだイメージのサイズをとってくる
console.log(e.target.width());
console.log(e.target.height());
console.log(e.width());
console.log(e.height());
//画像が読み終わったかどうかのフラグ
console.log(e.getImgComplete());
}
}
var _img01 = new ImgLoader("./img/ph01.jpg",option);
_img01.load();
コンプリート指定せずに上からsetIntervalでgetImgComplete（）でフラグを監視してあげるとかもできるので使い方は臨機応変で対応していただければ幸いです。