jQueryで画像を非同期で読み込み。

2012.04.13 / Notes

jQueryで非同期通信で画像データを読み込んで、読み込み完了時に処理を行うスクリプトのメモです。
サンプルはこちら

$(function() {  
	$("a#button").click(function() {  
		loadImage("images/image.jpg");
		return false;
	});  
  
	function loadImage(url) {   
		var img = new Image();
		img.src = url;
		$(img).bind("load", function() {
		
			//画像読み込み完了時の処理
			$("div#target").html($(img));
		});
	}
});

$(function() {

$("a#button").click(function() {

loadImage("images/image.jpg");

return false;

});

function loadImage(url) {

var img = new Image();

img.src = url;

$(img).bind("load", function() {

//画像読み込み完了時の処理

$("div#target").html($(img));

});

}

});

リンクをクリックした際に画像データの読み込みを開始して、「bind」のイベントハンドラで読み込み完了時に「div#target」へ画像を挿入しています。