jquery - 之前的图像大小在 DOM 中

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);

});

Working demo: http://jsfiddle.net/7twNk/

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

请注意，您不需要继续用 $() 包装 imgLoad，因为它已经是一个 jQuery 对象。