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?

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

回答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.

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

回答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

回答5:

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

回答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.

回答7:

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