可能重复: How to get image size (height & width) using javascript?
通常,当指定宽度时,我们可以使用$('img').width()或$('img').css('width')获得图像宽度,如下所示
<img src="image.gif" width="32" height="32" />
<img src="image.gif" style="width: 32px; height: 32px" />但如果我们不指定宽度:
<img src="image.gif" />IE将返回28 0px,FF将返回0 0px。
问题是,我们可能故意将图像宽度设置为28 0px或0 0px,这将在没有实际设置宽度的情况下产生相同的数字。
我的问题是:我们如何判断一幅图像是否有特定的宽度/高度?
编辑
对不起,各位,忘记了一件重要的事情: IE上的28 0px和FF上的0 0px只有在找不到图像(404)时才会发生。
发布于 2012-10-15 21:02:22
检查.attr('width') / .attr('height')。
发布于 2012-10-15 21:15:47
这是一个黑客,但您可以通过这种方式获得原始HTML:
var htmltag=$("img")[0].outerHTML;然后对width="..."或style="..."进行解析
if (
htmltag.match(/style=['"][^'"]*width:/) ||
htmltag.match(/width=['"]/)
) alert("Has width");有一些关于border-width的边缘情况,等等,但是你明白了。
发布于 2012-10-15 21:13:08
图像在浏览器中异步加载,因此它取决于您检查维度的位置。我认为您看到的是,当您查询宽度或高度时,图像尚未加载。
如果运行此操作,您可能会看到初始警报()报告为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()
});https://stackoverflow.com/questions/12903902
复制相似问题