jQuery externalWidth 给出零值(动态加载的内容)

Question

我正在尝试将图像添加到页面末尾，获取其高度和宽度，并使用这些值来计算页面上另一个图像的高度/宽度(这是一个在线方程)我正在构建的编辑器)。

我正在使用 CSS 设置高度，并且希望宽度能够自动缩放。我需要在 jquery 中执行此操作，还是浏览器会自动为我执行此操作？

这是我正在尝试做的事情类型的示例。

$( 'body' ).append( '<img class="letter" src="my_image.png">' );
var new_element_height = $('.letter').last().outerHeight();
var new_element_width = $('.letter').last().outerWidth();
$('.letter').last().remove();
alert( new_element_height );
alert( new_element_width );

我的 CSS 是这样的:

.letter {
    height: 50px;
}

new_element_height 给我 50px，new_element_width 给我 0px。我猜这是因为我动态加载这些图像，然后尝试获取高度/宽度。

我希望高度为 50px，宽度正确缩放到该高度，然后将这些值放入 new_element_height/new_element_width 变量中。

Answer 1

看起来您正在尝试在加载图像之前获取图像尺寸。请参阅JavaScript: Know when an image is fully loaded

有关工作演示，请查看 http://jsfiddle.net/eBrnu/2/尝试将高度设置为不同的值，您会看到宽度也会发生变化。

此外，您可能至少需要在 CSS 中设置 visibility: hide，这样图像就不会闪烁，但仍会占用空间。