jQuery outerWidth 给出零值（动态加载的内容）

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。我猜这是因为我正在动态加载这些图像，然后尝试获取高度/宽度。

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

Answer 1

您似乎正在尝试在加载图像之前获取图像尺寸。见JavaScript: Know when an image is fully loaded

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

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