How to get the height of a hidden image?

Question

When a div is hidden (display:none) the browser will not load the images that are inside it. Is there a way to tell the browser to load the image? I need the height and the width of the image to do some pre-processing.

Note: due to some other code, I can't make the div visible. Check the example here. Also a "lazy load" example wouldn't work for me.

score 5 · Accepted Answer · answered Jan 31 '11 at 15:14

I've added some preloading, wrapped it into a function and that does the trick:

function getImageDimension(el, onReady) {    
    var src = typeof el.attr === 'function' ? el.attr('src') : el.src !== undefined ? el.src : el;

    var image = new Image();
    image.onload = function(){
        if(typeof(onReady) == 'function') {
            onReady({
                width: image.width,
                height: image.height
            });
        }
    };
    image.src = src;
}

Can be used as:

getImageDimension($('#img1'), function(d){ alert(d.height); });
var url = 'http://urology.jhu.edu/patrickwalsh/photo1.jpg';
getImageDimension(url, function(d){ alert(d.height); });

score 4 · Answer 2 · answered Jan 31 '11 at 13:33

4

Make the div visible, but position it outside the page with position: absolute;.

If your "other code" doesn't let you do this either, create a new image node with the same URL, position it outside the page, wait until it's loaded, read its height and destroy.

answered Jan 31 '11 at 13:33

Matti Virkkunen

63,558
9
127
159

Your first solution doesn't work for me, but the second solution sounds promising. Do you have a code example for me? – Kees C. Bakker Jan 31 '11 at 13:40
@Kees: No, I don't have a code example at hand, but by writing one you would get a fun exercise in DOM and events! – Matti Virkkunen Jan 31 '11 at 13:52

score 3 · Answer 3 · edited May 23 '17 at 11:45

3

You could try pre-loading the images using jquery - check out this SO answer:

Preloading images with jQuery

This should pre-load them before you even decide to display them.

edited May 23 '17 at 11:45

Community

1
1

answered Jan 31 '11 at 13:34

xil3

16,305
8
63
97

score 1 · Answer 4 · answered Jan 31 '11 at 13:38

I believe this is only true for items whose parent is "display:none"

See this article on the matter http://dev.jquery.com/ticket/125

Also, see this example (save as an .html file)

<html>
<head>
<title>Example</title>



<script type="text/javascript">
    $(document).ready(function(){
        alert($("#target").height());
    });
</script>
</head>

<body>
  <div id="parent" style="display:none;">
    <div id="target" style="height:100px;display:block;">
        a
    </div>
</div>
</body>
</html>

score 0 · Answer 5 · edited May 23 '17 at 11:50

0

Check out this thread.

Don't load hidden images

edited May 23 '17 at 11:50

Community

1
1

answered Jan 31 '11 at 13:35

Arseny

5,159
4
21
24

3

I actually **do** want to load hidden images. – Kees C. Bakker Jan 31 '11 at 13:38

How to get the height of a hidden image?

5 Answers5

Linked