javascript - JavaScript/JQuery - 加载新的 img src 后如何获取 img 高度？

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时触发 ready 。当图像加载到元素上时触发。DOMloadimg

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