'console.log' 的 firefox 和 chrome 输出之间的差异答案

【问题标题】：Discrepancy between outputs from firefox and chrome for 'console.log''console.log' 的 firefox 和 chrome 输出之间的差异
【发布时间】：2010-08-03 20:39:07
【问题描述】：

为什么 firefox 会给我正确的输出，而 Chrome 却没有？

我正在尝试查找未在样式表或其他任何地方指定的 div 的高度。

Chrome 给了我整数值“20”，但 firefox 给了我正确的值（使用 firebug）516。

这是我用来生成 console.log 的代码：

var img_h = $("#pics").height();
    console.log(img_h);

<div id="pics" width="100%">
        <img src="image1.jpg" width="45%">
        <img src="image2.jpg" width="45%">
    </div>

想法？

【问题讨论】：

什么时候执行代码？我知道一些浏览器首先将高度设置为初始值，并且只有在渲染和布局发生时才能使用正确的值。因此，如果您尝试将高度提早，则可能是错误的。
它位于我的 document.ready(function) 的末尾。从字面上看就在尾随 });

标签： jquery firefox google-chrome cross-browser

【解决方案1】：

如果你想加载图片，而不是document.ready，你应该使用window.onload，像这样：

$(window).load(function() {
  var img_h = $("#pics").height();
  console.log(img_h);
});

最显着的区别是图像（不是动态创建的！）在此代码运行时已加载并准备就绪。

【讨论】：

我可以把它放在'document.ready(function){'里面还是放在外面？
如果其他人好奇，外面更安全，@marc - 欢迎:)

【解决方案2】：

这不是解决方案，但我将其搁置，因此也没有其他人提供它。

不是肯定的，通过尝试将 jquery 包装在 doc ready 包装器中：

$( document ).ready(function(){
    //your code
});

只是一个理论，但可能是在触发 console.log 时元素实际上还没有加载。

【讨论】：

它在我的整个 document.ready(function) 中。里面已经有其他代码了，所以我应该有两个 document.ready(functions) 吗？
不。那不是问题所在。