我正在创建一个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。


当前回答

现在有一个jQuery插件,event.special。Load,用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

其他回答

另一个建议是使用imagesLoaded插件。

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});

对于不希望更改原始位置或图像的函数。

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);

我检查了Dio的答案,它对我来说很有用。

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

确保你调用了所有的函数。在fadeIn()的召回函数中处理图像大小。

谢谢你。

现在有一个jQuery插件,event.special。Load,用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

您可以通过编程方式获取图像,并使用Javascript检查尺寸,而完全不需要处理DOM。

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';