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

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

Answer 1

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

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

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