画像遅延ロード完了後イベント実行

by iwbjp

HTML

<p>bill.jpg</p>
<p>bill3.jpg</p>
<p id="result"></p>

JavaScript

//var images = ['bill.jpg', 'bill2.jpg'];
var src;

$('p').click(function(){

	var src = $(this).text();
	$('#result')
		.html('<img src="http://iwb.jp/s/img/' + src + '" width="300">');

	var preload = function(src){
		var d = $.Deferred(); 
		var img = new Image;
		img.src= src;
		img.onload = d.resolve;
		img.onerror = d.reject;
		return d.promise();
	};
	
	/*
	var preload_images_paralell = function(srcs){
		var dfds = srcs.map(function(src){return preload(src);});
		return $.when.apply($, dfds);
	}
	*/
	
	preload(src).done(function(){
		alert('loading done');
	}).fail(function(){
		alert('fail');
	});

});