Jquery can'；无法在chrome中获取对象的真实高度/宽度

我有一个问题，如果我在css中设置一个图像高度，并尝试获得高度/宽度，那么在不同的浏览器中会得到不同的结果。有没有办法在所有浏览器中获得相同的维度

你可以找到一个活生生的例子Replace

$this.css({width: '', height: ''}); 

与

---

Opera 10.10高/宽2008 x 3008

看起来这是一个比赛条件，至少对我来说是使用Chrome。获取尺寸时，图像尚未完成加载。在200毫秒超时后，我将所有设置都设置为启动，并显示真实的宽度/高度

    $(document).ready(function() {
        setTimeout("getImageDimensions()", 200);
    });

    function getImageDimensions() {
        var pic_real_width;
        var pic_real_height;

        $("#topContent img").each(function() {
            var $this = $(this);
            $this.removeAttr("width");
            $this.removeAttr("height");
            $this.css({ width: 'auto', height: 'auto' });

            pic_real_width = $this.width();
            pic_real_height = $this.height();
            $this.css({ width: '', height: '100px' });
        });

        $("#text").append(" height: " + pic_real_height/*$("#top_img_0").attr("height")*/ + "<br/>");
        $("#text").append(" width: " + pic_real_width/*$("#top_img_0").attr("width")*/ + "<br/>");
    }

$（文档）.ready（函数（）{
setTimeout（“getImageDimensions（）”，200）；
});
函数getImageDimensions（）{
var pic_real_width；
var picu_real_height；
$（“#topContent img”）。每个（函数（）{
var$this=$（this）；
$this.removeAttr（“宽度”）；
$this.removeAttr（“高度”）；
$this.css（{width:'auto'，height:'auto'}）；
pic_real_width=$this.width（）；
pic_real_height=$this.height（）；
$this.css（{宽度：''，高度：'100px'}）；
});
$（“#文本”）。追加（“高度：+pic#real_高度/*$（“#top_img_0”）。属性（“高度”）*/+“
”；
$（“#文本”）。追加（“宽度：+pic#real_width/*$（“#top_img_0”）。属性（“宽度”）*/+“
”；
}

---

在Chrome、IE和Firefox中测试并运行。所有显示2008 x 3008。

图像未加载到

文档中。准备好了
，您需要使用
窗口。加载
事件以确保它们存在，如下所示：

CSS:
img{
  height:100px;
  }

Script:
$(document).ready(function(){
    $("#text").append($("#img_0").attr("height"));
    $("#text").append($("#img_0").attr("width"));
});

$(window).load(function(){
    $("#text").append($("#img_0").height());
    $("#text").append($("#img_0").width());
});

，重要的部分是加载图片。
Nick Craver关于使用$（window）.load（）的回答是正确的，但是图像也有一个load（）方法，该方法允许更精细的粒度，特别是当可能有多个图像要加载时

  $(document).ready(function(){ 
    $("#top_img_0").load (function (){
      $("#text").append( "height: " + $("#top_img_0").attr("height")+"<br/>" );
      $("#text").append( "width: " + $("#top_img_0").attr("width")+"<br/>" );   
      }); 
  });

$（文档）.ready（函数（）{
$（“#top#img_0”）。加载（函数（）{
$（“#text”）.append（“高度：+$”（“#top_img_0”）.attr（“高度”）+“
”；
$（“#text”）.append（“宽度：”+$（“#top_img_0”）.attr（“宽度”）+“
”；
}); 
});
我已经对此进行了测试，但没有任何帮助，Chrome 4.1高/宽0 x 0尝试超时给出了一条线索，说明了为什么事情不起作用，但通过这种方式修复竞态只会将其转变为不同的竞态。也就是说，它现在可以在您的高速连接上工作，但不能在较慢的连接上工作。该链接不再工作。这里有一个新的：
  $(document).ready(function(){ 
    $("#top_img_0").load (function (){
      $("#text").append( "height: " + $("#top_img_0").attr("height")+"<br/>" );
      $("#text").append( "width: " + $("#top_img_0").attr("width")+"<br/>" );   
      }); 
  });