chrome中使用jquery的图像高度问题

Question

$('img').height() 在 Chrome 中返回 0，但在 IE 和 Firefox 中返回实际高度。

在 Chrome 中获取图像高度的实际方法是什么？

Answer 1

正如 Josh 提到的，如果图像尚未完全加载，jQuery 将不知道尺寸是多少。尝试这样的操作，以确保您仅在图像完全加载后尝试访问其尺寸：

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

我的假设是在图像加载完成之前调用该函数。您能否尝试延迟该函数以查看是否确实如此？如果是这种情况，您可以在运行该函数之前使用计时器进行作弊。

检测图像何时加载有点复杂。 看看这个脚本的一些想法 - 也许它会为你工作。

Answer 3

您可能需要预加载图像并设置回调函数：

// 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

我使用的一个稍微丑陋但有效的修复方法是使用后端语言（在我的例子中是 php）来获取高度并将其设置在图像上，然后再将其发送到浏览器。

它很丑陋，但是简单快捷

Answer 5

尝试使用图像预加载器，这是我写的获取另一个问题的答案。

Answer 6

刚刚做了一些实验，我发现

$(this).height();

返回 0 - 但是如果你只使用普通的旧 JS，

this.height;

我会得到正确的图像高度。

Answer 7

刚刚遇到了同样的问题：通过 CSS 或 HTML 预先设置宽度和高度。