在将图像加载到页面上之前，如何使用jQuery计算图像的宽度和高度

我的头撞在墙上，因为我知道我以前做过。但是这个代码不起作用。现在，我知道很多事情都很混乱，因为我试图快速地把它拼凑起来（让它发挥作用，让它正确，让它快速，等等），但这会给我带来这么多痛苦和痛苦吗？

我有以下基本HTML：

<div class="js-gallery force js-on">
  <h5>More Images &raquo;</h5>
  <a href="http://url/to/image1.jpg"><img src="http://url/to/image_thumb1.jpg" alt=""></a>
  <a href="http://url/to/image2.jpg"><img src="http://url/to/image_thumb2.jpg" alt=""></a>
  <a href="http://url/to/image3.jpg"><img src="http://url/to/image_thumb3.jpg" alt=""></a>
        etc...
</div>

和下面的JS拦截链接点击，创建一个对象来通过迷你图库保持状态（下一个、上一个、活动等），并计算屏幕宽度/高度，使图像非常适合。应该很简单：

// Set up intialized variables
var overlay = $("<div class='gallery-overlay' id='gallery-overlay'></div>").hide().appendTo("body"),
  state = {},
  galleryNext = $("<a class='gallery-next' href='#'>Next</a>"),
  galleryPrev = $("<a class='gallery-prev' href='#'>Previous</a>"),
  gallery = $(".js-gallery");
gallery.addClass("js-on");
gallery.find("a").click( function (e) {
  e.preventDefault();
  state.gallery = $(this).parent(".js-gallery");
  thisHref = this.href;
  overlay.fadeIn( 200, function () { 
    buildGalleryOverlay( thisHref ); 
  });
  return false;
});
$("#gallery-overlay").live( "click", function (e) {
  overlay.fadeOut();
  overlay.find("#image-box").remove();
});
$("#image-box a").live( "click", function (e) {
  var imageBox = $("#image-box");
  imageBox.fadeOut().remove();
  buildGalleryOverlay( this.href );
  return false;
});
function buildGalleryOverlay( clickedHref ) {
  var ww = $(window).width(),
    wh = $(window).height(),
    imageBox = $("<div class='image-box' id='image-box'></div>").appendTo(overlay).show(),
    image = $("<img src='" + clickedHref + "' />"),
    iw, oldW,
    ih, oldH,
    overWidth, overHeight,
    allImages;
  window.console.log( imageBox );
  if ( !state.total ) {
    state.total = 0;
    state.images = [];
    allImages = $(state.gallery).find("a");
    $.each( allImages, function (index, value) {
      state.total += 1;
      state.images.push(value.href);
    });
  }
  state.active = state.images.indexOf( clickedHref );
  state.next = state.images[state.active + 1];
  state.prev = state.images[state.active - 1];
  image.appendTo(imageBox);
  window.console.log( image );
  iw = $(image).width();
  ih = $(image).height();
  // continued...

问题就在这里，因为每隔一次点击图像链接就会返回0和0的宽度和高度。不知道为什么。当这种情况发生时，脚本就不起作用了（如果CSS设置为width: 0、height: 0，图像就会被隐藏——或者如果我关闭了它，那么这些图像对屏幕来说太大了）：

  window.console.log( iw );
  window.console.log( ih );
  overWidth = iw - ww;
  overHeight = ih - wh;
  if ( overWidth > 0 || overHeight > 0 ) {
    if ( overWidth > overHeight ) {
      // Landscape
      oldW = iw;
      iw = ww - 80;
      ih = (iw * ih) / oldW;
    }
    else {
      // Portrait
      oldH = ih;
      ih = wh - 160;
      iw = (ih * iw) / oldH;
    }
  }
  galleryPrev = galleryPrev || $("<a href='##' class='gallery-prev'>Previous</a>");
  galleryNext = galleryNext || $("<a href='##' class='gallery-next'>Next</a>");
  galleryPrev.attr( "href", (state.prev || state.images[state.images.length - 1]) ).appendTo( imageBox );
  galleryNext.attr( "href", (state.next || state.images[0]) ).appendTo( imageBox );

  // Here I've turned off the CSS adjustments because iw and ih were getting 0s
  if ( iw && iw > 0 && ih && ih > 0 ) {
    image.css({width: iw + "px", height: ih + "px"});
    imageBox.css({width: iw + "px", height: ih + "px"});
  }
}
});