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に「ジャンプ」私は修正しようとしているが、クリックした最初の時間に発生。 2回目は既に高さを知っているからです。 /ギャラリーには異なるアスペクト比の異なる画像があります。

---

これを修正する方法はありますか？前もって感謝します。

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(); 
    }); 
}); 

​​

Answer 2

を取り除くことができます私はあなたの要素への直接参照することが示唆：

$("#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>