1

我已经阅读了多篇关于此的帖子,甚至找到了一个插件(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();

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

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

香农

4

6 回答 6

4

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

visibility: hidden

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

于 2013-05-07T07:42:22.467 回答
0

实现您想要的最简单的方法是将此图像附加到以 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();              
});
于 2013-05-07T07:37:19.797 回答
0

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

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

请参考链接

演示

于 2013-05-07T07:42:28.077 回答
0
于 2013-05-07T07:44:03.473 回答
0

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

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

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();
}
于 2015-01-28T10:17:06.657 回答
-1

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

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

香农

于 2013-05-08T02:09:08.880 回答