我正在创建一个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。
当前回答
正如Luke Smith所说，图像加载是一团糟。它在所有浏览器上都不可靠。这个事实给了我极大的痛苦。缓存的图像在某些浏览器中根本不会触发事件，所以那些说“图像加载比setTimeout更好”的人是错误的。
卢克·史密斯的解决方案在这里。
关于如何在jQuery 1.4中处理这些混乱的问题，有一个有趣的讨论。
我发现这是相当可靠的设置宽度为0，然后等待“完成”属性为真，宽度属性来大于零。您还应该注意错误。
其他回答
下面是一个跨浏览器的解决方案，当您所选择的图像加载时触发一个事件:http://desandro.github.io/imagesloaded/您可以在imagesLoaded()函数中查找高度和宽度。
另一个建议是使用imagesLoaded插件。
$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
正如Luke Smith所说，图像加载是一团糟。它在所有浏览器上都不可靠。这个事实给了我极大的痛苦。缓存的图像在某些浏览器中根本不会触发事件，所以那些说“图像加载比setTimeout更好”的人是错误的。
卢克·史密斯的解决方案在这里。
关于如何在jQuery 1.4中处理这些混乱的问题，有一个有趣的讨论。
我发现这是相当可靠的设置宽度为0，然后等待“完成”属性为真，宽度属性来大于零。您还应该注意错误。
您可以使用HTML图像元素的naturalWidth和naturalHeight属性。(这里有更多信息)。
你可以这样使用它:
//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;
这似乎适用于所有浏览器，除了IE版本8及以下。
现在有一个jQuery插件，event.special。Load，用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
