複数の画像読み込み後の処理を Deferred で

元ネタはこちら。

[ajax/pjax]複数枚の画像読み込み後に処理を実行する

これ、Deferredでやってみたら？ と思って書き直してみました。
やってることは同じ。

var startOnLoadImage = function　($target){
  var d = new $.Deferred();
  var targets = [];
  var loaded = 0;
  $target.each(function(i, elm) {
    targets[i] = new Image();
    targets[i].src = elm.src;
  });
  $.each(targets, function(){
    $(this).on('load', function(){
      loaded++;
      if (loaded == targets.length){
        d.resolve();
      }
    });
  });
  return d.promise();
};

こんな風に使う。

$img = $('#sakiNiYonde .image');
startOnLoadImage($img).done(function(){
  // 処理
});

追記

よく考えたら（考えなくても）2回each回す必要なくね？

var startOnLoadImage = function($target) {
  var d = new $.Deferred();
  var loaded = 0;
  var max = $target.length;
  $target.each(function() {
    var targetObj = new Image();
    $(targetObj).on('load', function(){
      loaded++;
      if (loaded == max){
        d.resolve();
      }
    });
    targetObj.src = this.src;
  });
  return d.promise();
};

こんな感じです。 https://jsfiddle.net/kdoq31cq/