获取图片原始宽高及对应比例

html5提供了获取图片原始宽高的方法：img.naturalWidth／img.naturalHeight

现在，我想要轮播展示一组图片：
当图片宽／高>1（展示框比例）时（即扁扁的图片），让图片的宽达到展示框的100%，而高度适应原图片比例，图片在展示框中左右顶边，上下居中。
当图片宽／高<=1时（即瘦瘦的图片），让图片的高达到展示框的100%，而宽度适应原图片比例，图片在展示框中上下顶边，左右居中。
那么，需要获得各个图片的宽高，以及它们的比例；根据比例是否大于1；对应添加类Fill-x／Fill-y对应不同的样式。

一开始，获取宽高的我是直接这样写的：

imageList.forEach(function(item) {
  img = item.children[0];
  var imgW = img.naturalWidth;
  var imgH = img.naturalHeight;
  var imgR = imgW / imgH;

  console.log("width:" + imgW);
  console.log("height:" + imgH);
  console.log(imgR);

  var resultMode = imgR > 1 ? ‘Fill-x' : 'Fill-y';
  $(img).addClass(resultMode);
}

但是运行时却发现，获取到的宽高始终都是0。
上网查了一下资料，发现是因为在图片的相关数据没有被加载前，它的默认高度就是0。
这个时候想到的解决方法是：可以使用setTimeout，通过延迟来保证图片加载完成：

function imageLoad(img) {
  img.onload = function() {
    var imgW = img.naturalWidth;
    var imgH = img.naturalHeight;
    var imgR = imgW / imgH;
    console.log("width:" + imgW);
    console.log("height:" + imgH);
    console.log(imgR);
    var resultMode = imgR > 1 ? 'Fill-x' : 'Fill-y';
    $(img).addClass(resultMode);
    }
 }
}

list.forEach(function(item) {
    img = item.children[0];
    setTimeout(imageLoad(img), 500)
})

但是在运行时依然存在问题，跑出来的宽高有时是正确的，有时却是0，这个时候是因为没有考虑img.complete的情况，故最终代码为：（不过需要注意ie没有foreach方法）

function imageLoad(img) {
  if(img.complete){
   var imgW = img.naturalWidth;
   var imgH = img.naturalHeight;
   var imgR = imgW / imgH;
   console.log("complete:width:" + imgW);
   console.log("height:" + imgH);
   console.log(imgR);
   var resultMode = imgR > 1 ? 'Fill-x' : 'Fill-y';
   $(img).addClass(resultMode); 
  }
  img.onload = function() {
    var imgW = img.naturalWidth;
    var imgH = img.naturalHeight;
    var imgR = imgW / imgH;
    console.log("width:" + imgW);
    console.log("height:" + imgH);
    console.log(imgR);
    var resultMode = imgR > 1 ? 'Fill-x' : 'Fill-y';
    $(img).addClass(resultMode);
    }
 }
}

imageList.forEach(function(item) {
    img = item.children[0];
    setTimeout(imageLoad(img), 500)
})