Javascript 更改src并获取新src的高度

我正在创建一个包含多个图像的图库，您可以单击一个小缩略图，然后打开该图像的更大版本

一旦打开，如果移动光标，图像将在y轴上跟随您。近似

我的问题： 一切正常，但当你第一次打开图像并移动光标时，我正试图纠正一个“跳跃”。 这是因为“.image zoom img”（新的大图像）的高度仍未定义

所以基本上，我认为我需要的是，一旦src被改变，得到新的大图像的高度

---

注意：在JSFIDLE上，我试图纠正的“跳转”仅在您第一次单击时发生。因为第二次已经知道了高度画廊将有不同宽高比的不同图像

---

---

你知道怎么解决这个问题吗？提前感谢。

只需等待图像加载，然后“打开”缩放版本。
此时，高度将可用，您可以在

zoomTracking

中访问它，因此您可以去掉全局变量

h

function zoomTracking(event){
  var imageZoom = $('.image-zoom img');
  var h = imageZoom.height();
  var startPos = imageZoom.data("pointerStartPosY");
  if (startPos === undefined) {
    startPos = event.clientY;
    imageZoom.data("pointerStartPosY", startPos);
  }

  var vptHeight = $(window).height();
  var y = -((h - vptHeight) / vptHeight) * (startPos - event.clientY);
  imageZoom.css('top', y + "px");
}

$(function() {
  $('.image-zoom img').on("load", function(e) {
    $('.image-zoom').fadeIn();
  });

  $('#grid a').click(function(e) {
    $('.image-zoom img').attr('src', this.href)
                        .data("pointerStartPosY", undefined);
    return false;
  });

  $('.image-zoom').mousemove(function(e) {
    zoomTracking(e);
  });

  $('.image-zoom').click(function() {
    $('.image-zoom').fadeOut();
  });
});

---

我建议您直接参考该元素：

$("#my_img").height(); 

在哪里,

<img src="https://cdn.dribbble.com/users/226242/screenshots/3871814/attachments/878728/thumbnail/1976_chevrolet_blazer_fullview.jpg" id="my_img"></a> 

谢谢@caiuby freitas，我试过了，但还是有同样的问题。谢谢@andreas，但“跳跃”仍然存在。例如，如果单击小图像的底部，会出现大图像，但当您稍微移动光标时，图像会跳转。但您的

y

公式存在问题是的，我已经没有东西可以尝试了。。。你认为用这个公式我就不能用了吗？感觉如此接近。@Iñaki如果更新我的答案以修复“跳跃”，因为

y

的值是如何计算的。问题是行为不同，并且取决于您单击的位置，您无法看到整个图像。--我已经更新了一个jsfiddle（），我认为已经接近了。现在它识别出了新图像的高度，但我需要执行“$（'.image zoom'）.fadeIn（）；”，一旦上一步完成。有什么办法吗？

<img src="https://cdn.dribbble.com/users/226242/screenshots/3871814/attachments/878728/thumbnail/1976_chevrolet_blazer_fullview.jpg" id="my_img"></a>