【jQuery】画像のロード画面でフェードイン

jquery

画像をロードする時のロード画面ってなにげに分からないなーと思い調べてメモ。
基本的な流れとして下記のようにしてみた。

  • 読み込む画像のURL
  • ローディング画像を最初は透明にしておいてフェードインさせる
  • jQueryでimg要素を作成して初期は透明にしてattr()でsrc属性で読み込む
  • 画像を表示させるところにappendメソッドで追加する
  • loadメソッドで読みこんだ後の処理として、ローディング画像をfadeOutさせてその後に、img要素をfadeInさせる

ということで下記に一気にメモっとく

$(document).ready(function(){
		//初期設定
		var url="images/1.jpg";
		
		loadimg();
		/* 画像読み込み関数
		----------------------------------*/
		function loadimg(){
		$("div#loadimg").hide();
		$("div").fadeIn(400);
		
		//img要素を作成する
		var $img=$("");
		//初期では透明にしておく
		$img.hide();
		//画像のurlを設定
		$img.attr("src",url);
		//画像を追加
		$("div#wrapper").append($img);		
		//画像読み込み
		$img.bind("load",function(){
			$("div#loadimg").fadeOut(400);
			$(this).delay(400).fadeIn(400);
			});
		}
		//
		});

デモ（読み込みだけ）

デモ（クリックで5つの画像を順番に表示）