在隐藏的div中获取图像的高度

Question

我想获得一个隐藏的div-containter内部的图像的高度/宽度,但.height()与.width()这两个返回0(如预期的).

$('body').append('<div id="init"><img id="myimg" src="someimage.png" /></div>');
$('#init').hide();
$('#myimg').height(); // == 0
$('#myimg').width(); // == 0

如何获得正确的图像高度/宽度？我需要它做出一些决定:-)

最好的问候,Biggie

Answer 1

我刚刚遇到了解决方案,你所做的不是依靠jQuery来为你做这件事.相反,获取javascript元素并从元素本身获取高度,如下所示:

var img = hiddenDiv.children('img');

var imgHeight = img.get(0).height;
var imgWidth = img.get(0).width;

jQuery方法get(0)允许我们获取底层DOM元素,有趣的是,DOM元素维度不会改变.

但需要注意的是,出于性能原因,img.get(0)如果您打算更多地使用它,则需要缓存.

jQuery获取方法文档

Answer 2

因为图像尚未加载.....

$('body').append('<div id="init"><img id="myimg" src="something.png" /></div>');
$('#init').hide();

$('#myimg').bind("load",function(){
    alert(this.height) //works
})?

继续测试:http://jsfiddle.net/WMpSy/

Answer 3

如果想要正确的高度和宽度，则不能将其隐藏，但可以将其移动到屏幕之外，从而有效地隐藏它。尝试这个：

var hiddenDiv = $('<div id="init"><img id="myimg" src="someimage.png" /></div>').appendTo('body').css({
    'position': 'absolute',
    'top': -9999
});

var img = hiddenDiv.children('img');
img.height();
img.width();