jquery - 获取隐藏图像的高度

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

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

图像没有手动设置高度和宽度属性。

香农

score 4 · Accepted Answer

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

visibility: hidden

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

score 0 · Accepted Answer

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

visibility: hidden

我喜欢使用 Jquery ImagesLoaded Plugin 来确定图像何时准备就绪，如下所示：

//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();              
});

score 0 · Accepted Answer

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

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

请参考链接

演示

score 0 · Accepted Answer

您不需要使用额外的插件，只需使用 1.4.4 之后的新版本 jQuery
```
 $('img').width();
 $('img').height();
```
这个问题实际上是指位置看这里：
jQuery: Get height of hidden element in jQuery
在 jquery 的较新版本中解决了看这里：隐藏的 div 高度（改变我的建议）

score 0 · Accepted Answer

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

我用这种方法来知道展示的是哪一个：无；

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

score -1 · Accepted Answer

看到实际上我只能看到两个选项：

克隆项目，将其定位，使其对用户不可见，然后获取它的尺寸。
在视觉上隐藏它，但保持它在 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/

香农

jquery - 获取隐藏图像的高度

6 回答 6

Related

Reference