Question

I have, what I think is, a strange issue. I am running a simple query that finds the largest image on a page. Here is some test data – all images are 32×32 but one is sized to 300×300.

<img src="app/assets/images/icons/blue.png" />
<img src="app/assets/images/icons/error.png"/>
<img src="app/assets/images/icons/info.png" height="300" width="300"/>

If I run a simple query like this:

$('img').each(function(){
        console.log($(this).height());
    });

I will get 0,0,300 — and not 32,32,300.

Can anyone point me to a better method of finding the size the image is being rendered at?

Thanks.

Answer 1

If the image is “natively” sized, i.e. no width or height are present in the HTML, you’ll need to wait for the image to load before you know its size. I use this:

jQuery("img").each(function(){
    var img = jQuery(this);
    if (img.attr("complete")) {
        console.log(img.height());
    } else {
        img.load(function(){
            console.log(img.height());
        });
    }
});