如何在图片加载到HTML之前获取其尺寸？

Question

起初，图像的高度为零，刷新页面后才能获得其实际高度。 我需要在第一次获取图像时就获得其高度。 有谁能帮我吗？

$j(document).ready(function(){
           var imgV = new Image();
           imgV.src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG";
           $j("#imgD").html(imgV.height);
           alert(imgV.height);
});


<div id="imgD"></div>
<img src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG" />

- john

Answer 1

您无需将图像插入到DOM中即可获取其尺寸：

$("<img />")
    .attr("src", "http://www.google.com/intl/en_ALL/images/logo.gif")
    .load(function() {
        alert(this.width);
        alert(this.height);
    })
;

- nickf

Answer 2

当图片加载完成后，你才能得到其尺寸大小。通常情况下，当你重新载入页面时，图片会立即从缓存中获取，因此它的大小也能够立即获得。

如果由于某些原因你需要在显示图片之前获取其大小，你可以首先将其放在屏幕外进行显示。添加一个onload处理程序，在图片准备就绪时将调用该程序-- 然后你就可以检查它的大小，并将其连接到所需位置。

通过屏幕外显示，我的意思是将其放置在页面底部一个带有overflow: hidden样式的1x1像素div中。

- levik

---

或者更好的方法是，将位置绝对设为-9999px左/上方，这样您就不必担心内容是否足够大以可能到达隐藏的div。 - Dan Lew

你为什么需要在屏幕外显示图像呢？你不能只是将“onload”处理程序附加到图像上，然后通过“image.width”和“image.height”获取图像尺寸吗？ - Steve Harrison