Ändern src und Höhe des neuen src

Question

Ich erstelle eine Galerie mit mehreren Bildern, wo Sie auf ein kleines Thumbnail klicken können und eine größere Version dieses Bildes wird geöffnet.

Einmal geöffnet, wenn Sie den Cursor bewegen, folgt Ihnen das Bild auf der Y-Achse. Ähnlich https://www.zara.com/es/es/chaqueta-denim-combinada-pC33052724001.html?v1=5161517&v2=269184

Mein Problem: Alles funktioniert gut, aber wenn Sie öffnen Sie das Bild zum ersten Mal und bewegen Sie den Cursor gibt es einen „Sprung“, den ich versuche zu korrigieren. Dies geschieht, weil die Höhe von ".image-zoom img" (neues großes Bild) noch nicht definiert ist.

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

Also im Grunde, was ich denke, ich brauche, ist die Höhe des neuen großen Bild zu erhalten, sobald die src geändert wurde.

---

Hinweise: Auf dem jsfiddle den „Sprung“ Ich versuche nur zu korrigieren, das erste Mal passiert, Sie klicken. Weil das zweite Mal schon die Höhe kennt./Die Galerie wird verschiedene Bilder mit verschiedenen Seitenverhältnissen haben.

---

Irgendeine Idee, wie man das repariert? Danke im Voraus.

Answer 1

Warten Sie, bis das Bild geladen wird, bevor Sie die gezoomte Version "öffnen".
An dieser Stelle wird die Höhe zur Verfügung stehen und Sie darauf zugreifen können in zoomTracking und laden Sie daher der globalen Variablen bekommen 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

Answer 2

befreien Ich schlage vor, Sie auf das Element einen direkten Bezug zu machen :

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

wo

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