jQuery可调整大小的追加图像大小问题

问题描述

我有下面的简单代码，当单击按钮时，该代码会将图像追加到#container.问题是当我第一次单击该按钮时，图像大小未正确附加.但是当再次单击按钮时，我们将获得具有正确图像尺寸的附加图像.如果我们从等式中删除resizable()，则不会发生这种情况.

I have the simple code below which appends an image to #container when button is clicked. The problem is when i first click on the button, image size is not properly appended. But when button is clicked again then we get the appended image with correct image size. This doesn't happen if we remove resizable() from the equation.

为什么第一次单击时无法获得正确的图像尺寸.下面的代码:

Why is the first click not getting the proper image size. Code below:

<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>

推荐答案

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

Make it resizable when it's loaded:

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

如果您在不清楚图像的大小之前进行此操作，那么可调整大小的初始大小将设置为0/0

If you do it before it's not clear what size the image will have, so the initial size of the resizable is set to 0/0

这篇关于jQuery可调整大小的追加图像大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！