使用JavaScript获取图像的实际宽度和高度？（在Safari / Chrome中）

Question

我正在创建一个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();

但是在Webkit浏览器中，例如Safari和Google Chrome的值为0。

Answer 1

Webkit浏览器在加载图像后设置height和width属性。建议不要使用超时，而建议使用图像的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属性。