jQuery 複数画像のローディング
JavaScriptで複数画像を読み込む際のローディング処理。全て読み込んでからエフェクトをかけたい場合などで使えます。
ライブラリはいつもどおりjQuery 1.3.2。やり方は単純にloadを使います。1枚画像であればimgタグにonloadが手軽。
下記ソースはeach内で呼び出している関数。XMLを読み込んでループ処理という流れ。
-
function loadHandler(obj) {
-
var li = d.createElement("li");
-
var img = d.createElement("img");
-
$(img).attr({"src": obj.find("src").text(), "class":"reflect rheight10 ropacity40"});
-
$(li).append(img);
-
$("#container> ul").append(li);
-
$("#container> ul").css("display", "none");
-
$(img).load(
-
function()
-
{
-
if($("#container> ul").get(0).count-- == 1) rendering();
-
}
-
);
-
}
- XML読み込み
- lengthをul Elementのcountというプロパティに挿入
- eachでloadHandler()呼び出し
- DOM Elementの準備とimg要素にloadを追加
- 画像を読み込んだならul Elementのcountをデクリメント
- countと読み込み完了の回数がそろったら読み込み終了フラグキター
- rendering()呼び出して描画
n/nを読み込みました的なローディングはこれで完了。あとはローディング中や読み込み完了後のデザインを当て込むだけ。
