CODEWITHSUNDEEP
jqueryimagegoogle-chromeheight
Prasad
Prasad

Reputation: 59491

image height using jquery in chrome problem

$('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?

Upvotes: 12

Views: 14469

Answers (7)

meefojoe
meefojoe

Reputation: 1

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.

Upvotes: 0

Mathijs
Mathijs

Reputation: 11

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

Upvotes: 1

SpaceGeneral
SpaceGeneral

Reputation: 727

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

Upvotes: -1

hmabesa
hmabesa

Reputation: 54

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

Upvotes: 1

JGarrido
JGarrido

Reputation: 176

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

Upvotes: 9

JasonWyatt
JasonWyatt

Reputation: 5303

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

Upvotes: 0

Joshua
Joshua

Reputation: 3603

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.

Upvotes: 1

Related Questions