获取图像宽度和高度答案

【问题标题】：Get image width and height获取图像宽度和高度
【发布时间】：2009-04-28 20:38:02
【问题描述】：

当没有为图像指定样式时，我需要在 javascript (jQuery) 中获取图像的尺寸（jQuery 的 css() 返回 0）。

可能是因为我在询问图像尺寸之前使用 jQuery 加载图像。如果是这种情况，是否有任何事件可以告知图像何时加载？

【问题讨论】：

【解决方案1】：

也许图像尚未完全加载，因此无法给出尺寸。但是如果没有您的代码，我无法判断您做错了什么，但这里有一个示例可以工作：

function LoadImage(isrc) {
    var oImg = new Image();
    oImg.src = isrc;
    if (oImg.complete) {
        window.alert(oImg.src + ' ' + oImg.width + ' x ' + oImg.height);
    }
    else {
        window.setTimeout('iLoad(imgsrc)', 1000);
    }
}

<body onLoad='LoadImage(imgsrc)'>

【讨论】：

complete 似乎不适用于 chrome。到目前为止，这对我有用：stackoverflow.com/questions/318630/…

【解决方案2】：

这里有一个有用的链接，看看演示：http://docs.jquery.com/Events/load

使用 jquery 有一个 load() 事件在图像加载完成时触发，即：

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#theImage').load(function()
        {
            // do the stuff here.
        });
    });
</script>


<img src="blah.jpg" id="theImage" />

【讨论】：

【解决方案3】：

根据你在 image.width 或 image.naturalWidth（和高度等价物）之后的内容，width/height 给出了图像标签上的宽度/高度属性，naturalWidth/Height 给出了实际底层图像的尺寸。

【讨论】：

【解决方案4】：

图像加载后，您可以使用img's onload 获取尺寸：

<img src="..." onload="getDimensions(this)" />

【讨论】：

【解决方案5】：

您可以尝试结合 karim79 和 John Boker 的答案。尝试将图像预加载到隐藏的 DOM 中，当它加载时，您可以尝试获取它的宽度和高度。

【讨论】：