之前的图像大小在DOM中

问题描述：

在将其放入DOM之前，如何获取图像大小？之前的图像大小在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 

});

答

使用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/

这工作，因为浏览器填充元素下载图像时的属性。另一方面，jQuery获取元素—的实际可见尺寸，当元素不显示时，它总是0。

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

+1注包装 – 2011-05-25 12:47:39

@安迪-E的感谢名单正常工作！ – 2011-05-25 12:51:29

注意：如果你想得到已经在DOM中的图像的自然宽度和高度，你可以隐藏它（'display：none;'），然后像上面的例子那样调用'img.width'。您可能需要设置0ms超时以消除更新DOM与检查宽度的竞争条件。 – colllin 2013-05-11 02:00:47

答

创建新图像时，.width将为您提供未呈现图像的原始尺寸，而.width（）是一个jQuery方法，并且在将图像插入DOM之前不返回值。

在普通的老JS;

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

将返回真值

浏览器在获取图像时不会停止JS执行，因此您需要等待'onload'事件才能检索尺寸。 – 2011-05-25 12:44:43

之前的图像大小在DOM中

相关推荐