Question

我已经测试了我的代码的多个实例，但是有些不一致我无法弄清楚。所以我希望聪明的家伙可以提供帮助。

我在标题

中有这个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));

Answer 1

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

您需要做的是错开JS调用，直到您的第一个图像完全加载。这可以使用jQuery使用loaded（）事件，或使用onLoad事件使用简单的JavaScript（它们是同一个）来完成。这应该给你正确的值。

Answer 2

尝试$(window).load而不是ready

加载页面后使用Jquery更新带图像大小的表单

2 个答案: