为什么在chrome中刷新页面时宽度的值设置为零？答案

【问题标题】：Why does the value of width gets set to zero when the page is refreshed in chrome?为什么在chrome中刷新页面时宽度的值设置为零？
【发布时间】：2012-03-30 02:13:36
【问题描述】：

我编写了一些 jQuery 代码，在其中我获取了屏幕上图像的宽度并将它们存储在一个变量中。然后我在控制台中记录了该变量以查看它的值。当页面第一次加载时，它会显示正确的值，但是如果我按 F5，它会显示 0 作为宽度。

这是 HTML：

    <body>
        <img src="img1.jpg" alt="image">
        <img src="img1.jpg" alt="image">
        <script type="text/javascript" src="script.js"></script>
    </body>

这是 jQuery 代码（script.js）：

    jQuery(document).ready(function($) {
        var imgs = $('img');
        var width = imgs[0].width;
        console.log(width);
    });

第一次加载页面时控制台显示600，但当我按F5 时它显示0。为什么会这样？

【问题讨论】：

标签： javascript jquery dom google-chrome width

【解决方案1】：

在jQuery(document).ready() 时间，尚不能保证图像已加载。必须加载图像才能获得它们的宽度。图片是异步加载的，可能会在jQuery(document).ready() 触发后完成。

要确定图像是否已加载，您需要为该特定图像设置一个 onload 处理程序，以便您可以知道它何时被专门加载，或者您只需要在所有图像都加载时检查图像宽度该页面使用window.onload 或jQuery $(window).load(fn) 加载。

最简单的做法是将您的代码更改为：

jQuery(window).load(function() {
    var imgs = jQuery('img');
    var width = imgs[0].width;
    console.log(width);
});

就个人而言，我建议您使用 jQuery 的 .height() 和 .width() 方法，如下所示：

jQuery(window).load(function() {
    var imgs = jQuery('img');
    var width = imgs.eq(0).width();
    console.log(width);
});

你可以在这里看到这个工作：http://jsfiddle.net/jfriend00/D4CyN/

【讨论】：

这样做会在第 2 行显示此错误 Uncaught TypeError: object is not a function：var imgs = $('img');
好的，显然你在 document.ready 中使用的分配“$”的技巧不适用于 window.load。我已将其从代码中删除。
当您使用 document.ready 时，您“希望”在文档准备好之前加载图像，但不能保证。这不是访问图像的可靠方式。在某些情况下它可能在某些浏览器中工作，但使用 window.onload 将在任何地方按规范工作。

【解决方案2】：

如果您知道图像尺寸，请将它们放在标记中：

<img src="img1.jpg" width="600" height="…">

那么你永远不会得到0 的宽度。 :D

【讨论】：