Question

我已经阅读了多篇帖子，甚至找到了一个插件（http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/），但仍然没有解决我的问题。

我需要在图像显示在前端之前获取图像的实际高度和宽度。

我已经尝试了很多东西，我真的不想展示它，然后搞清楚，然后再次隐藏它然后再显示它。它似乎不实用，我想知道是否有人找到任何解决方案？

我试过了：

$('img').get(0).clientWidth;
$('img').get(0).naturalWidth;
$('img').get(0).width;
$('img').get(0).offsetWidth;
$('img').get(0).width();

这些都没有运气，我也尝试过上面的高度。

图像DOESN“T具有手动设置的高度和宽度属性。

香农

Answer 1

display:none没有尺寸。如果您需要它可测量但隐藏，请使用

visibility: hidden

它还会占用文档流程中的空间。如果您不想这样，您可以暂时将其位置更改为绝对位置。

Answer 2

实现您想要的最简单方法是将这些图像附加到以CSS作为默认样式隐藏的DOM中：

visibility: hidden

我喜欢使用Jquery ImagesLoaded插件来确定图像的准备时间如下：

//container holding your images
$('.photos').imagesLoaded(function () {
    //Function to measure size

    //Take measurements
    var w = $('img').width();
    var h = $('img').height();

    //Once you know the proper size, show it
    $('img').show();              
});

Answer 3

嘿你可以从Jquery获得高度和宽度。我为你做了演示。

$(this).height();
$(this).width();

请参阅链接

Demo

Answer 4

您不需要使用额外的插件，只需在1.4.4之后使用新版本的jQuery
```
 $('img').width();
 $('img').height();
```
这个问题实际上是指位置看这里：
jQuery: Get height of hidden element in jQuery
在jquery的新版本中解决了一下这里： Hidden div height (changing my advice)

Answer 5

在许多情况下，您必须知道隐藏元素中图像的大小。它可以是图像本身或远亲。

我做了这个方法，知道一个人正在展示：无;

function findHiddenParent(element)
{
    if (element.parent().is(':hidden'))
    {
        return findHiddenParent(element.parent());
    }
    else
    {
        return element;
    }
 }

我这样使用它：

if (img.is(':hidden'))
{
    hiddenParent = findHiddenParent(img);
    hiddenParent.show().css('visibility','hidden');
}
//Get width and height from img (that is a var getted from a jQuery selector

//When things done with width and height
if (hiddenParent != undefined)
{
    hiddenParent.css('visibility','visible').hide();
}

Answer 6

看到我只能看到两个选项：

克隆项目，将其定位，使其对用户不可见，然后获取其尺寸。
视觉上隐藏它，但保持它在DOM中的存在并从那里获得它的尺寸。

两者都不是很好的解决方案，但对于任何想要使用它的人来说都是：

HTML：

<img id="hidden" src="http://www.shannonhochkins.com/_images/513330a8965f59b83a00034d" />

<强> CSS：

#hidden {display:none; margin:10px;}

<强> JAVASCRIPT：

$.fn.actual = function(type, includeMargin){
    var elem = $(this),
        unit = 0;
        includeMargin = (includeMargin ? true : false);
    elem.css({position: 'absolute', visibility: 'visible', display: 'block'});
    switch(type) {
        case 'height':
            unit = elem.height();
        break;
        case 'width':
            unit = elem.width();
        break; 
        case 'outerHeight':
            unit = elem.outerHeight(includeMargin);
        break;
        case 'outerWidth':
            unit = elem.outerWidth(includeMargin);
        break;  
        case 'innerWidth':
            unit = elem.innerWidth(includeMargin);
        break;   
        case 'innerHeight':
            unit = elem.innerHeight(includeMargin);
        break;             
    }
    elem.css({position: 'static', visibility: 'visible', display: 'none' });
    return unit;
};

var height = $('#hidden').actual('height');
var width = $('#hidden').actual('outerWidth', true);
alert('Width: ' + width + ' height: ' + height);

<强>样本：

http://jsfiddle.net/bXG5n/

香农

获取隐藏图像的高度

6 个答案: