我正在创建一个jQuery插件。
我如何得到真实的图像宽度和高度与Javascript在Safari?
Firefox 3、IE7和Opera 9的操作如下:
var pic = $("img")
// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();
但在Safari和谷歌等Webkit浏览器中，Chrome的值为0。
当前回答
为了补充Xavi的答案，Paul Irish的github David Desandro的gitgub提供了一个名为imagesLoaded()的函数，它的工作原理相同，并解决了一些浏览器的缓存图像不触发.load()事件的问题(使用聪明的original_src -> data_uri -> original_src切换)。
它被广泛使用并定期更新，这有助于它成为解决问题的最健壮的解决方案。
其他回答
我检查了Dio的答案，它对我来说很有用。
$（'#image'）.fadeIn（10，function （） {var tmpW = $（this）.width（）; var tmpH = $（this）.height（）; }）;
确保你调用了所有的函数。在fadeIn()的召回函数中处理图像大小。
谢谢你。
下面是一个跨浏览器的解决方案，当您所选择的图像加载时触发一个事件:http://desandro.github.io/imagesloaded/您可以在imagesLoaded()函数中查找高度和宽度。
正如Luke Smith所说，图像加载是一团糟。它在所有浏览器上都不可靠。这个事实给了我极大的痛苦。缓存的图像在某些浏览器中根本不会触发事件，所以那些说“图像加载比setTimeout更好”的人是错误的。
卢克·史密斯的解决方案在这里。
关于如何在jQuery 1.4中处理这些混乱的问题，有一个有趣的讨论。
我发现这是相当可靠的设置宽度为0，然后等待“完成”属性为真，宽度属性来大于零。您还应该注意错误。
这是跨浏览器的
var img = new Image();
$(img).bind('load error', function(e)
{
$.data(img, 'dimensions', { 'width': img.width, 'height': img.height });
});
img.src = imgs[i];
通过使用得到尺寸
$(this).data('dimensions').width;
$(this).data('dimensions').height;
干杯!
那么形象呢?naturalHeight和image。naturalWidth属性呢?
在Chrome、Safari和Firefox的一些版本中似乎都运行得很好，但在IE8甚至IE9中就完全不行。
