我正在创建一个 jQuery 插件。
如何在 Safari 中使用 Javascript 获取真实图像的宽度和高度？
以下适用于 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 和 Google Chrome 等 Webkit 浏览器中，值为 0。
Webkit 浏览器在加载图像后设置高度和宽度属性。我建议使用图像的 onload 事件，而不是使用超时。这是一个快速示例：
var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
为了避免 CSS 可能对图像尺寸产生的任何影响，上面的代码在内存中创建了图像的副本。这是FDisk建议的一个非常聪明的解决方案。
您还可以使用naturalHeight和naturalWidthHTML5 属性。
function getOriginalWidthOfImg(img_element) {
var t = new Image();
t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
return t.width;
}
您不需要从图像或图像尺寸属性中删除样式。只需使用 javascript 创建一个元素并获取创建的对象宽度。
在接受的答案中有很多关于onload如果从 WebKit 缓存加载图像时不会触发事件的问题的讨论。
在我的情况下，onload缓存图像触发，但高度和宽度仍然为 0。一个简单的setTimeout解决了我的问题：
$("img").one("load", function(){
var img = this;
setTimeout(function(){
// do something based on img.width and/or img.height
}, 0);
});
我不能，为什么说onload即使在图像加载事件被解雇从缓存（jQuery的改善1.4 / 1.5） -但如果你仍然遇到此问题，也许我的回答的组合和var src = img.src; img.src = ""; img.src = src;技术将工作。
（请注意，出于我的目的，我不关心图像的属性或 CSS 样式中的预定义尺寸 - 但您可能希望根据 Xavi 的回答删除这些尺寸。或者克隆图像。）
根本问题是 WebKit 浏览器（Safari 和 Chrome）并行加载 JavaScript 和 CSS 信息。因此，JavaScript 可能会在计算出 CSS 的样式效果之前执行，从而返回错误的答案。在 jQuery 中，我发现解决方案是等到 document.readyState == 'complete', .eg,
jQuery(document).ready(function(){
if (jQuery.browser.safari && document.readyState != "complete"){
//console.info('ready...');
setTimeout( arguments.callee, 100 );
return;
}
... (rest of function)
就宽度和高度而言……取决于您在做什么，您可能需要 offsetWidth 和 offsetHeight，其中包括边框和填充等内容。