Question

如何在将图像放入DOM之前获取图像大小？

var imgLoad = $("<img />");
$(imgLoad).attr("src", ImageGallery.ImagesList[index] + "?" + new Date().getTime());
$(imgLoad).unbind("load");
$(imgLoad).bind("load", function () {

   // Get image sizes
   alert(imgLoad.width()); // RETURN 0

});

Answer 1

改为使用imgLoad[0].width和imgLoad[0].height，或使用this代替imgLoad：

var imgLoad = $("<img />");
imgLoad.attr("src", ImageGallery.ImagesList[index] + "?" + new Date().getTime());
imgLoad.unbind("load");
imgLoad.bind("load", function () {

   // Get image sizes
   alert(this.width);

});

工作演示：http://jsfiddle.net/7twNk/

这是有效的，因为浏览器在下载图像时会填充元素的height / width属性。另一方面，jQuery获取元素的实际可见尺寸 - 当元素未显示时，它总是为0。

请注意，您不需要将imgLoad与$()一起包装，因为它已经是jQuery对象。

Answer 2

创建新图像时，.width将为您提供未渲染图像的原生尺寸，而.width（）是一种jQuery方法，在图像插入DOM之前不会返回值。

在普通的旧JS中;

var i = new Image()
i.src = 'blah.gif'
var h = i.height
var w = i.width

会给你一个真正的价值

之前的图像大小是在DOM中

2 个答案: