获取图像的宽度和高度。

Question

获取图像的宽度和高度。

javascriptjquery

4

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

也许是因为我刚刚使用jQuery加载了图像，然后再请求其尺寸。如果是这种情况，是否有任何事件可以监听告诉我们图像何时已加载？

- Gerardo

5个回答

1

这里有一个有用的链接，看一下演示：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" />

- John Boker

0

根据您需要的是image.width还是image.naturalWidth（以及高度等效项），width/height提供图像标记上的宽度/高度属性，naturalWidth/Height提供实际底层图像的尺寸。

- olliej

0

您可以使用img的onload在图像加载后获取其尺寸：

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

- Dan Lew

0

你可以尝试结合 karim79 和 John Boker 的答案。尝试将图片预加载到隐藏的 DOM 中，当它加载完成后，你可以尝试获取其宽度和高度。

- Ferry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TStamper · Accepted Answer

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

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