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

by iwbjp

HTML

<p><img src="http://iwb.jp/s/img/bill.jpg" class="s" width="400" height="300" /></p>
<p><img src="http://iwb.jp/s/img/bill.jpg" class="s" width="400" height="300" /></p>

JavaScript

var images = [];

$(".s").each(function(i){
  images[i] = $(this).attr("src");
});

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_images_paralell(images).done(function(){
  alert('loading done');
}).fail(function(){
  alert('fail');
});