3

Possible Duplicate:
How to get image size (height & width) using javascript?

Normally we can get image width with $('img').width() or $('img').css('width') when width is specified like the following

<img src="image.gif" width="32" height="32" />
<img src="image.gif" style="width: 32px; height: 32px" />

But if we don't specify a width:

<img src="image.gif" />

IE will return 28px, and FF will return 0px.

The problem is that we might set an image width to 28px or 0px intentionally, which would result a same number with the condition where no width is actually set.

My question is: how can we tell whether an image has been given a specific width/height or not?

edit

sorry folks, forgot one important thing: 28px on IE and 0px on FF only happens when image cannot be found (404)

4

3 回答 3

2

Check .attr('width') / .attr('height').

于 2012-10-15T21:02:22.317 回答
1

这是一个 hack，但您可以通过以下方式获取原始 HTML：

var htmltag=$("img")[0].outerHTML;

然后将其解析为width="..."or style="..."：

if (
    htmltag.match(/style=['"][^'"]*width:/) ||
    htmltag.match(/width=['"]/)
   ) alert("Has width");

有一些边缘情况border-width等等，但你明白了。

于 2012-10-15T21:15:47.433 回答
0

图像在浏览器中异步加载，因此这取决于您检查尺寸的位置。我认为您所看到的是，当您查询宽度或高度时，图像尚未加载。

如果你运行它，你可能会看到初始的 alert() 报告为 0，但如果你点击按钮，它会显示实际大小：

<img id="Image" src="images/MessageBoardLogo.png" />
<input type="button" id="Button" value="Caption" />

<script type="text/javascript">
$().ready( function() {
    imageSize();

    $("#Button").click(imageSize);
});
function imageSize()
{
    alert($("#Image").width());
}        
</script>

对我来说具有讽刺意味的是，FireFox 在第一个示例中立即报告宽度，IE 和 Chrome 显示 0px，但这只是表明它取决于浏览器的时间、图像的加载时间等。

确保图像已加载并准备好可靠地读取大小的最佳方法是使用负载处理程序：

$("#Image").load( function() { 
                      // do whatever you need with width and height
                      global.imgWidth = $(this).width(); 
                      global.imgHeight = $(this).height() 
                   });
于 2012-10-15T21:13:08.430 回答