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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

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

友情链接