JavaScript/JQuery - 一旦加載新的img src，我如何獲得img Height？

Question

我有一個自定義的旋轉木馬我正在工作，下面是代碼的一些部分...這是巨大的，所以我不打擾把一個完整的工作示例。

無論如何，我從php傳遞了一個JSON對象，其中包含圖像的文件名。當點擊右箭頭，元素，

<img id="carousel_image" src="http://example.org/image/image.jpg" /> 

更改使用jQuery一個新的src，

$('#arrow_right').click(function(){ 
     $('#carousel_image').attr('src', storedSlides[currentSlide]); 
     $('#carousel_image').ready(function(){ 
      console.log($('#carousel_image').height()); //returns 1000 
     }); 
     console.log($('#carousel_image').height()); //returns 1000 
    }); 

兩個日誌返回1000，之前單擊原始圖像的高度。如何獲得新圖像的真實高度（一次完全加載）？

謝謝你的幫助！

Answer 1

您需要使用load事件，而不是ready，準備好在DOM呈現時觸發。當圖像加載到img元素上時，會觸發load。

http://www.w3schools.com/jsref/event_img_onload.asp

$('#arrow_right').click(function(){ 
    $('#carousel_image').attr('src', storedSlides[currentSlide]); 
    $('#carousel_image').on("load", function(){ 
     console.log($('#carousel_image').height()); 
    }); 
    console.log($('#carousel_image').height()); 
});