jQuery可调整大小附加图像大小问题

Question

我有一个简单的代码，当点击按钮时将图像添加到#container。问题在于，当我第一次点击按钮时，图像大小没有正确地添加。但是当再次点击按钮时，我们得到了正确大小的附加图像。如果我们从方程式中删除resizable（），则不会发生这种情况。

为什么第一次点击没有得到正确的图像大小？以下是代码：

<button id="test">add me</button>
<div id="container"></div>

<script type="text/javascript">
$('#test').live('click',function(){
    var elm = '<img src="http://www.navegabem.com/blog/wp-content/uploads/2009/04/firefox-icon.png" />'
    $(elm).appendTo('#container').resizable().parent().draggable();
});
</script>

- Hussein

---

“图像大小未正确添加”是什么意思？您的代码似乎对我来说可以正常工作（http://jsfiddle.net/4SRQf/）。 - user113716

在第一次单击时，您不能获得正确的图像尺寸，图像附加的大小小于实际尺寸。在第二次单击时，它可以正常工作。清除浏览器缓存并在Chrome和Firefox中尝试。load函数可以解决该问题。 - Hussein

Answer 1

在加载时使其可调整大小：

$(elm).load(function(){$(this).resizable();}).appendTo('#container').parent().draggable();

如果在调整大小之前不清楚图像的大小，那么可调整大小的初始大小将设置为0/0。

- Dr.Molle

---

谢谢。我发完问题后就想通了。 - Hussein