javascript - 更改 src 并获取新 src 的高度

Question

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

打开后，如果您移动光标，图像将在 y 轴上跟随您。类似于 https://www.zara.com/es/es/chaqueta-denim-combinada-pC33052724001.html?v1=5161517&v2=269184

我的问题:一切工作正常，但是当您第一次打开图像并移动光标时，会出现我试图纠正的“跳跃”。发生这种情况是因为“.image-zoom img”(新大图像)的高度尚未定义。

https://jsfiddle.net/z1jwyjur/2/

var h = 0;

function zoomTracking(event){
    h = $('.image-zoom img').height();
    var vptHeight = $(window).height();
    var y = -((h - vptHeight) / vptHeight) * event.clientY;
    $('.image-zoom img').css('top', y + "px");
    console.log(h);
}

$(function() {
    $('#grid a').click(function(e) {

      // Currently "image zoom img" src is empty. So we give him a value, the big version of the image we click.        
      var changeSrc = $(this).attr('href');
      $('.image-zoom img').attr('src', changeSrc);

      // We make appear "image zoom" 
      $('.image-zoom').fadeIn();

      // Here, the point is to get the height of the new big version of the image, and declare that height as "h". Not working... 
      h = $('.image-zoom img').height();

      zoomTracking(e);
      return false;
    });

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

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

所以基本上我认为我需要的是在 src 更改后获取新大图像的高度。

<小时/>

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

<小时/>

知道如何解决这个问题吗？提前致谢。

Answer 1

只需等待图像加载即可“打开”缩放版本。
此时高度将可用，您可以在 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();
  });
});

fiddle