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时会触发就绪。在load元素上加载图片时会触发img。

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

JavaScript / JQuery - 一旦加载了新的img src，我如何获得img Height？

1 个答案: