checking for image dimensions

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  
  </body>

</html>

var imagesURLArray = [
  'http://placekitten.com/200/300',
  'http://placekitten.com/100/100',
  'http://placekitten.com/400/200'];

var dimArray = [];

function getImageDimensions(url){
  
  var deferred = new $.Deferred();
  var img = $('<img src="'+ imagesURLArray[i] +'"/>').load(function(){
    dimArray.push( {width: this.width, height: this.height} );
    deferred.resolve();
  });
  
  return deferred.promise();
}

var promises = [];

for (var i = 0; i < imagesURLArray.length; i++) {
  promises.push(getImageDimensions(imagesURLArray[i]));
}

$.when.apply($, promises).then(function(){
   console.log('dimArray: ' + dimArray);
});

/* Styles go here */