image height using jquery in chrome problem

Question

$('img').height() returns 0 in chrome, but it returns the actual height in IE and firefox.

Whats the actual method to get the height of the image in chrome?

Do you have `height` specified on either the `img` tag itself, or in the CSS? — Traveling Tech Guy, Nov 16 '09 at 18:18
Do stuff not on `$(document).ready` but on `$(window).load`. Worked for me — http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/ — jibiel, Oct 10 '11 at 19:30
Depending on your circumstances, using $('#your_image').on('load', ...) might be appropriate. — Mr_Chimp, Aug 22 '13 at 09:55

score 9 · Answer 1 · answered Nov 16 '09 at 19:04

As Josh mentioned, if the image has not fully loaded yet, jQuery won't know what the dimensions are yet. Try something like this to ensure you're only attempting to access it's dimensions after the image has been completely loaded:

var img = new Image();

$(img).load( function() {
    //-- you can determine the height before adding to the DOM
    alert("height: " + img.height);
    //-- or you can add it first...
    $('body').append(img);
    //-- and then check
    alert($('body img').height());
}).error( function() {
    //-- this will fire if the URL is invalid, or some other loading error occurs
    alert("DANGER!... DANGER!...");
});

$(img).attr('src', "http://sstatic.net/so/img/logo.png");

score 1 · Answer 2 · answered Nov 16 '09 at 18:32

1

My assumption is that this function is being called before the image is finished loading. Can you try putting a delay on the function to see if this is actually the case? If this is the case, you can cheat by using a timer before running the function.

It is a bit more complicated to detect when an image has been loaded. Have a look at this script for some ideas -- maybe it would work for you.

answered Nov 16 '09 at 18:32

Joshua

3,615
1
26
32

Or run the script in an body onload event, instead of the document ready event. It's not as precise, since the whole document has to load, but you can be sure the image has loaded (assuming it's an image in the code, not some AJAX loaded thing). – Frank DeRosa Nov 16 '09 at 18:39
2

@Frank, body onload gets called when the DOM is finished being created, it's not guaranteed that the assets within the DOM will have finished loading though (images included). – JasonWyatt Nov 16 '09 at 18:46

score 1 · Answer 3 · edited Dec 05 '12 at 21:23

1

A slightly ugly but effective fix that I used was use a backend language, in my case php, to get the height and set it on the image before sending it to the browser.

it's ugly, but simple and quick

edited Dec 05 '12 at 21:23

janisz

6,292
4
37
70

answered Dec 02 '10 at 10:04

Mathijs

11
1

score 1 · Answer 4 · answered Aug 04 '11 at 04:18

Preloading the image and setting up a callback function might be what you're looking for:

// simple image preloader
function getHeight(el,fn) {
    var img = new Image();
    img.onload = function() { fn(img.height); };
    img.src = el.attr("src");
}

$("img").each(function(){
    getHeight($(this),function(h){
        // what you need to do with the height value here
        alert(h);
    });
});

score 0 · Answer 5 · answered Feb 22 '13 at 10:30

0

Having just done some experiments with this I've found that

$(this).height();

Returns 0 - however if you just use plain old JS

this.height;

I get the correct image height.

answered Feb 22 '13 at 10:30

meefojoe

1

score 0 · Answer 6 · edited May 23 '17 at 12:14

0

Try using an image pre-loader, here's one I wrote for an answer to another question.

edited May 23 '17 at 12:14

Community

1
1

answered Nov 16 '09 at 18:48

JasonWyatt

5,275
1
31
39

score -1 · Answer 7 · answered Oct 19 '11 at 10:43

-1

Just had the same issue: set the width and height beforehand via CSS or HTML.

answered Oct 19 '11 at 10:43

SpaceGeneral

727
6
4

image height using jquery in chrome problem

7 Answers7

Linked