1

我已经测试了我的代码的多个实例，但有一些我无法弄清楚的不一致之处。所以希望各位聪明人能帮忙。

我在标题中有这个 jquery 代码

function real_image_size () {
    var img = document.getElementById('target'); 
    //or however you get a handle to the IMG
    var real_width = img.clientWidth;
    var real_height = img.clientHeight;

    $('#rw').attr('value', real_width);
    $('#rh').attr('value', real_height);

}

我有这个 html/php 代码，我想用显示的图像的尺寸进行更新

<img width="1000px" class="crop_img" id="target" src="$image_address" />


<form action="/save_cropped_image.php" method="post" onsubmit="checkCoords();">
      <input type="text" size="4" id="image_source" name="image_source" hidden="hidden" value="$image_address" />
      <input id="x" name="x" />
      <input id="y" name="y" />
      <input id="w" name="w" />
      <input id="h" name="h" />
      <input id="rw" name="rw" />
      <input id="rh" name="rh" />
      <input type="submit" value="Lagre nytt bilde" />
</form>

呈现页面时，我正在运行一个脚本来填充输入字段rw和rh显示图像的尺寸$target。

我的问题是rw正确更新，但rh总是更新为“2”。第一次呈现页面时。

如果我从下拉框中选择另一个图像（代码中未描述）。然后脚本更新#image，然后更新两者rw，并rh使用相同的功能正确更新(image_size_update())，而不仅仅是rw....

</script>

    <script>
    $(window).ready(real_image_size());

</script>

- - - 更新 - - -

我试图在加载图像后在函数上添加 setTimeout。但没有任何变化......仍然得到错误的rh（real_image_height）

$('#target').load(setTimeout(real_image_size(),10000));
4

2 回答 2

1

您的问题是一个简单但非常不起眼的问题。实际上，在加载时，您的图像可能尚未加载。浏览器已经知道它的宽度（因为它始终保持不变并且可能已经渲染了图像的至少一部分），但不知道总高度。

您需要做的是错开 JS 调用，直到您的第一个图像完全加载。这可以通过使用 jQuery 的 loaded() 事件来完成，或者在纯 JavaScript 中使用 onLoad 事件来完成（它们是相同的）。这应该为您提供正确的值。

于 2012-11-18T13:24:11.477 回答
1

尝试$(window).load代替ready

于 2012-11-18T13:24:58.303 回答